We Keep Coding

jQuery - How can I allow both numpad and number key row input; as well as prevent special characters from being entered?

I want to allow both number pad numeric and oridinary number from keyboard. Currently, it only allows the number key row. I also only want numbers to be entered, but it currently allows special characters.
$(document).ready(function() {
$('#price').keydown(function(event) {
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57) && event.which != 8) {
event.preventDefault();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='price'>

Have a look at this plug-in (Fork of texotela's numeric jquery plugin). This (jStepper) is another one.
This is a link if you want to build it yourself.
$(document).ready(function() {
$("#txtboxToFilter").keydown(function (e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A, Command+A
(e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
// Allow: home, end, left, right, down, up
(e.keyCode >= 35 && e.keyCode <= 40)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
});
NOTE: If your webpage uses HTML5, you can use the built-in <input type="number"> and use the min and max properties to control the minimum and maximum value.
$(function() {
$('#staticParent').on('keydown', '#child', function(e){-1!==$.inArray(e.keyCode,[46,8,9,27,13,110,190])||(/65|67|86|88/.test(e.keyCode)&&(e.ctrlKey===true||e.metaKey===true))&&(!0===e.ctrlKey||!0===e.metaKey)||35<=e.keyCode&&40>=e.keyCode||(e.shiftKey||48>e.keyCode||57<e.keyCode)&&(96>e.keyCode||105<e.keyCode)&&e.preventDefault()});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="staticParent">
<input id="child" type="textarea" />
</div>
I coppied from it on here
If its help for you.Please vote first writer .

Updated your code
$(document).ready(function() {
$('#price').keydown(function(event) {
if((event.which >= 48 && event.which <= 57) && event.shiftKey) {
event.preventDefault();
}
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57) && event.which != 8) {
event.preventDefault();
}
});
});

Use keypress for that instead of keydown
then
the keyCode of 0 to 9 are 48 to 57 so use this condition
if (event.keyCode < 48 || event.keyCode > 57) {
event.preventDefault();
}
this condition returns true if you enter keys that are not 0, 1, 2, 3, 4, 5, 6, 7 ,8 and 9 or not numbers
So your code would be like this
$(document).ready(function() {
$('#price').keypress(function(event) {
if (event.keyCode < 48 || event.keyCode > 57) {
event.preventDefault();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='price'>

Why we don't user input type number. I think just do it easy like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='number' id='price'>

How to allow numbers, backspace, delete, left and right arrow keys in the html text?

I am using following javascript code which I think should only allow numbers, backspace, delet, left arrow and right arrow keys in textbox, but it is also allowing alphabets. I don't know why?
function validateQty(event) {
var key = window.event ? event.keyCode : event.which;
if (event.keyCode == 8 || event.keyCode == 46
|| event.keyCode == 37 || event.keyCode == 39) {
return true;
}
else if ( key < 48 || key > 57 ) {
return false;
}
else return true;
};
Calling this function as
<input type="text" onkeypress='validateQty(event)'>

No doubt your code is correct but you missed "return" keyword in textbox.
<input type="text" onkeypress='return validateQty(event);'>
You can see the code here

<input type="text" class="form-control" id="dompetku_msisdn" name="dompetku_msisdn" placeholder="Phone Number" aria-describedby="helpBlock" onkeydown='return (event.which >= 48 && event.which <= 57) || event.which == 8 || event.which == 46 || event.which == 37 || event.which == 39' required /> </input>

function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
<HTML>
<HEAD>
</HEAD>
<BODY>
<input id="txtChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar" maxlength="10">
</BODY>
</HTML>

const validateQty = (event) => {
var key = window.event ? event.keyCode : event.which;
console.log(event);
if (event.keyCode === 8 || event.keyCode === 46
|| event.keyCode === 37 || event.keyCode === 39) {
return true;
} else if (key < 48 || key > 57) {
return false;
} else { return true; }
};
<input type="text" onkeydown='return validateQty(event);'>

I modified his code a bit, so you can just add a class to an input
$(".numberonly").keydown(function(e){
// Number Only
if (e.keyCode == 8 || e.keyCode == 46
|| e.keyCode == 37 || e.keyCode == 39) {
return true;
}
else if ( e.keyCode < 48 || e.keyCode > 57 ) {
e.preventDefault();
}
});
add class to an input
<input type="text" class="numberonly" />

Alow only Integer and Float values in Textfield

I have a textfield of Price.
I want only Integer and Float values in it.
I have done the Integer. But it is not accepting Float values like : 3110.6
Here is my Code DEMO
JS:
$(document).ready(function () {
$("#price").keydown(function (event) {
// Allow only backspace and delete
if (event.keyCode == 46 || event.keyCode == 8) {
// 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();
}
}
});
});
HTML:
<input name="price" type="text" id="price">

try this demo
$('#price').keypress(function(event) {
if(event.which == 8 || event.which == 0){
return true;
}
if(event.which < 46 || event.which > 59) {
return false;
//event.preventDefault();
} // prevent if not number/dot
if(event.which == 46 && $(this).val().indexOf('.') != -1) {
return false;
//event.preventDefault();
} // prevent if already dot
});

Simply use this:
<input name="price" type="number" id="price">
And remove your JavaScript code.

Try regular expression
/^[+-]?\d+(\.\d+)?$/
Just test the value of the input on the onchange event.

TRy Demo dot or period has keycode 190
$(document).ready(function() {
$("#price").keydown(function(event) {
// Allow only backspace and delete
if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 190 ) {
// 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();
}
}
});
});
But better will be use jquery validator plugin at http://jqueryvalidation.org/ as you dont have to check yourself.
For jquery version see JQUERY VALIDATION

jquery - How do I add an alert message to this jquery code base?

The Question
To help avoid end-user confusion, I want to add an alert message that pops up if/when the user clicks any other key ["alert('Only Numerical data allowed')"]. So if they press the 'k' the above message will pop up. Can anyone see how to set this code within this code base
jsfiddle: http://jsfiddle.net/EN8pT/4/
The Code
jquery:
$('input.numberinput').bind('keypress', function (e) {
var w = e.which;
return (w != 8 && w != 0 && (w < 48 || w > 57) && w != 46) ? false : true;
});
​
html
<div class="containercontent">
<div class="label">Enter a number:</div>
<input type="text" name="txtNumber1" id="txtNumber1" value="" class="numberinput" />
<div class="label">Enter a number:</div>
<input type="text" name="txtNumber2" id="txtNumber2" value="" class="numberinput" />
</div>

Simple :
$(document).ready(function () {
$('input.numberinput').bind('keypress', function (e) {
if((e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57) && e.which != 46) )
{
alert('Only Numbers');
return false;
}
else{
return true;
}
});
});
Link : http://jsfiddle.net/justmelat/EN8pT/

Hello again :) I can help you out with this as well:
$(document).ready(function () {
$('input.numberinput').bind('keypress', function (e) {
var allow = (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57) && e.which != 46) ? false : true;
if (!allow) {
alert('Only Numerical data allowed');
}
return allow;
});
});?
JSFiddle: http://jsfiddle.net/EN8pT/3/
Enjoy and good luck!

Make an <input type="text" /> only numbers are input-able? [duplicate]

This question already has answers here:
HTML text input allow only numeric input
(78 answers)
Closed 8 years ago.
<input type="text" id="target" />
How to do it with jQuery?

Though a bit more fragile since it uses keycodes... the following would work more intuitive because it makes it completely impossible to enter non-numbers:
$("#target").keydown(function(event) {
return ( event.keyCode < 32 || // Control characters
( event.keyCode >= 48 && event.keyCode <= 57 ) || // Numbers
event.keyCode == 127 ); // Delete key
});
Note to add: This is actually not the best way to go... since a (windows) ALT+[num]132 will make it possible to enter ä into the box. It should be combined with the keyup event to ensure that no characters have been entered as well like so, Combined:
$("#target").keydown(function(event) {
return ( event.keyCode < 32 || // Control characters
( event.keyCode >= 48 && event.keyCode <= 57 ) || // Numbers
event.keyCode == 127 ); // Delete key
});
$("#target").keyup(function(event) {
event.target.value = event.target.value.replace(/[^0-9]/g, "");
});
Also, this doesn't work with the num-pad-numbers over here so it definately is more fragile than a simple blur() event.

$("#target").blur(function(event) {
event.target.value = event.target.value.replace(/[^0-9]/g, "");
});
This will work as well:
$("#target").keypress(function(event) {
event.target.value = event.target.value.replace(/[^0-9]/g, "");
});

$('input[type=text].someclass').blur(function(event)
{
event.target.value = event.target.value.replace(/[^0-9]/g, "");
});

function onlyNumbers(evt) {
var e = evt;
if(window.event){ // IE
var charCode = e.keyCode;
} else if (e.which) { // Safari 4, Firefox 3.0.4
var charCode = e.which;
}
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
Source

if (!$.browser.mozilla) {
if (event.keyCode && (event.keyCode < 48 || event.keyCode > 57))
event.preventDefault();
}
else {
if (event.charCode && (event.charCode < 48 || event.charCode > 57))
event.preventDefault();
}