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
Related
This question already has answers here:
How to disallow characters (and replace them) on type or paste with jQuery?
(1 answer)
jquery only allow input float number
(14 answers)
Closed 2 years ago.
I have written this code, this code is working fine. But I think there should be some better way to write it, instead of just adding keyCode for everything to allow and disallow.
var element = "testField";
var regexNumber = /^\$?(((\d)\,?)+)?((\d)+)(\.(\d)+)?$/;
$("#" + element).keydown(function(event) {
// Allow only backspace, delete, dot, arrow key, tab, shift+tab
if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 190 || (event.keyCode >= 37 && event.keyCode <= 40) || event.keyCode == 9 || event.keyCode == 16) {
// let it happen, don't do anything
} else {
// Allow copy, paste, select all only numbers
if (((event.keyCode == 65 || event.keyCode == 86 || event.keyCode == 67) && (event.ctrlKey === true || event.metaKey === true))) {
if (event.originalEvent.clipboardData.getData('Text').match(regexNumber) == null) {
event.preventDefault();
}
}
// Ensure that it is a number and stop the keypress
if (event.keyCode < 48 || event.keyCode > 57) {
event.preventDefault();
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="testField" type="text" />
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;
}
i have a javascript code like below,
if (event.keycode != 37 && event.keycode != 39)
{
var phoneNumber = $('#phoneNumber').val();
if (phoneNumber.length < 1 && event.keyCode != 48)
$('#phoneNumber').val(0)
else if ((phoneNumber.length < 2 && event.keyCode == 48) )
event.preventDefault();
else
$('#phoneNumber').val(phoneNumber)
}
keycode 37 = left arrow, keycode 39 = right arrow but when i pressed these keys on keyboard condition which is between if block being executed, i am using chrome browser, also i used the if statement below,
if (event.keycode != 37 || event.keycode != 39)
{
var phoneNumber = $('#phoneNumber').val();
if (phoneNumber.length < 1 && event.keyCode != 48)
$('#phoneNumber').val(0)
else if ((phoneNumber.length < 2 && event.keyCode == 48) )
event.preventDefault();
else
$('#phoneNumber').val(phoneNumber)
}
urgent helps greatly appreciated,
Thanks everybody.
One issue is capitalization: it's keyCode, not keycode. Your code is using them inconsistently.
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.