The below code allows me to edit the table data row but may i know how can i restrict it to only integers.
Thank you in advance for your time :)
<td contenteditable="true" class="product_rate"></td>
Well, you can try reading the keyCode of the onkeypress event, determining whether it is a number (0-9) or not and then returning true or false respectively
<td onkeypress = "return testCharacter(event);" contenteditable="true" class="product_rate"></td>
function testCharacter(event) {
if ((event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode === 13) {
return true;
} else {
return false;
}
}
if ((event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode === 13)
those numbers are the assci code in decimal:
https://www.ascii-code.com/
48 is for the 0; 57 is for the 9; 45 is for the -
Related
I have written jquery for allowing numbers and dash - from being entered
$('.no-special-characters').keydown(function(e){
if (e.keyCode >= 48 && e.keyCode <= 57 || e.keyCode == 45) {
return true;
} else {
return false;
}
});
It does not work accordingly. It allows only numbers to be accepted.
try this code
$('.no-special-characters').keydown(function(e) {
if (e.keyCode >= 48 && e.keyCode <= 57 || e.keyCode == 189) {
return true;
} else {
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="no-special-characters">
Try this
Updated with backspace support
Allow the keycode of 189
$('.no-special-characters').keydown(function(e) {
var key = e.keyCode|e.which;
console.log(key) //check the key value in your console.log
if (key >= 48 && key <= 57 || key == 45 || key == 189 ||key == 8){
return true;
} else {
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="no-special-characters">
Here you go with one more solution
$('.no-special-characters').keydown(function(e){
if ((e.keyCode >= 48 && e.keyCode <= 57) || e.keyCode == 189) {
return true;
} else {
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="no-special-characters" type="text" />
Usually combine the keyCode from 48 to 57 & then the next keyCode condition.
Hope this will help you.
e.keyCode = 109 is '-' on numpad
e.keyCode = 189 is '-' in alphabate keybord key on chrome
e.keyCode = 173 is '-' in alphabate keyboard key on firefox & on chrome 173 keycord is Mute On|Off
Source
Maybe this helps you, because using only e.keyCode == 189 (as some answers say) wont work in Firefox.
You can see, what keyCode your key presses return here: Link
Edit: You can also use regular expressions. Then there is no need to add keyCodes for different browsers:
$('.no-special-characters').keypress(function(e){
var txt = String.fromCharCode(e.which)
var pattern = /^[0-9\-]+$/;
if (!(pattern.test(txt) || e.keyCode == 8)){
return false;
}
})
JSFiddle
This question already has answers here:
keyCode values for numeric keypad?
(13 answers)
Closed 1 year ago.
$('#cnic1').keydown(function(){
if (event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 ||
event.keyCode == 13 || (event.keyCode == 65 && event.ctrlKey === true) )
return;
if((event.keyCode < 48 || event.keyCode > 57))//0-9
event.preventDefault();
var length = $(this).val().length;
if(length == 5 || length == 13)
$(this).val($(this).val()+'-');
});
My problem is that this code only runs in response to the numbers entered at the top of the keyboard, but does not run in response to numbers entered from the numeric keypad.
I'm thinking the answer must be that the numeric keypad has different keyCode values, but how do I find out what those are?
The numeric keypad does have different keyCode values. The following link gives a full table of keyCodes for your reference:
https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
Use this code and press the keys. keycodes will be on console log;
window.onload = function(){
addEventListener("keydown",function(e){
console.log(e.keyCode);
});
}
Change if condition as
if((event.keyCode < 48 || event.keyCode > 57)&&(event.keyCode < 96 || event.keyCode > 105))//0-9
$('#cnic1').keydown(function() {
if (event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 ||
event.keyCode == 13 || (event.keyCode == 65 && event.ctrlKey === true))
return;
if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) //0-9
event.preventDefault();
var length = $(this).val().length;
if (length == 5 || length == 13)
$(this).val($(this).val() + '-');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="cnic1">
I want my JQuery code to only accept numbers as input in the textfield, this code is working well for me but soon discovered that if I used the numbers in my numpad it does not work. Any suggestions for this problem guys?
Here is my code:
<script type="text/javascript">
$(".txtboxToFilterNum").keydown(function(event) {
if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 0 || event.keyCode == 13 || event.keyCode == 27) {
// let it happen, don't do anything
}
else {
// Ensure that it is a NUMBER and stop the keypress
if (event.keyCode < 48 || event.keyCode > 57 ) {
event.preventDefault();
}
}
});
</script>
Do not check which key is pressed, but which content is given, it will be easier to check if the content are numbers only, and it will prevent many other things such as using copy and paste with letters (I guess this is not handled in your given code too)
working sample
HTML
<input type="text" class="textfield" value="" id="extra7" name="extra7" onkeypress="return isNumber(event)" />
Javascript
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
This question already has answers here:
HTML text input allow only numeric input
(78 answers)
HTML Input field force numbers
(7 answers)
Closed 10 years ago.
I have an input field where I only want to be able to input numbers 0 - 9 and nothing else. Its a mobile website so its important that it works on phones. I've found the following code which works perfectly on desktops but doesn't do anything on phones.
$("#phone").keypress(function (event) {
var code = (event.keyCode ? event.keyCode : event.which);
if (code < 48 || code > 57) event.preventDefault();
});
Does anyone know how I can achieve the same thing as the code above should but on phones?
It's about the key codes
/*Only number*/
$(".numb").keydown(function(event) {
if ( event.keyCode == 190 || event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || (event.keyCode == 65 && event.ctrlKey === true) || (event.keyCode >= 35 && event.keyCode <= 39)) {
if(event.keyCode == 190){
if($(this).val().indexOf('.')!=-1){
event.preventDefault();
}
}
return;
}
else {
if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
event.preventDefault();
}
}
});
html5 introduces some new input types you can use:
<input type="number" name="phone" />
see http://www.w3schools.com/html/html5_form_input_types.asp
I use the following java script function for integer validate which means the text box can allow to enter only the integer values alone.*It was work fine in Internet explorer and google chrome*.But I use this same function in FireFox the text box didn't allow to enter any characters in that which means it doesn't allow characters,numbers,space,anything else..How to solve this problem?
javascript function
$('.intValidate').live('keypress', function(event) {
var integervalidate = intValidate(event);
if (integervalidate == false)
return false;
});
function intValidate(event) {
if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||(event.keyCode == 65 && event.ctrlKey === true) ||(event.keyCode >= 35 && event.keyCode <= 39))
{
return;
}
else
{
if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 ))
{
event.preventDefault();
}
I use the class like,
<input type="text" id="abcd" style="width:30px" maxlength="2"class="intValidate""/>
Your problem is the inconsistent way that browsers use the keypress event.
Read this post to get a good explanation with an example of a work around.
You're examining keycodes in the keypress event. You should be looking at charCode values instead.