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'>

Javascript : Number input - prevent more than one decimal point

I was looking at make an input only-numeric type on knockout.
The accepted answer works fine but how can a more than one decimal point (like 4.4.4) be prevented from being entered (or how can a second decimal point be prevented)?
the code goes like this:
<input id="text" type="text" data-bind="numeric, value: number">
ko.bindingHandlers.numeric = {
init: function (element, valueAccessor) {
$(element).on("keydown", function (event) {
// Allow: backspace, delete, tab, escape, and enter
if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
// Allow: Ctrl+A
(event.keyCode == 65 && event.ctrlKey === true) ||
// Allow: . ,
(event.keyCode == 188 || event.keyCode == 190 || event.keyCode == 110) ||
// Allow: home, end, left, right
(event.keyCode >= 35 && event.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
else {
// Ensure that it is a number and stop the keypress
if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
event.preventDefault();
}
}
});
}
};

The custom binding does not look good for me. I'd recommend just using Knockout Validation, which proved a great plugin in my workflow with knockout. The syntax is easy: ko.observable(...).extend({ number: true }). You may also add min/max validation: .extend({ number: true, min: 0, max: 100 }) // percentage and the plugin allows to add css classes to invalid elements.
See example below. It does just what you want.
function viewModel() {
this.number = ko.observable(0).extend({ number: true });
}
ko.applyBindings(new viewModel(), document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.js"></script>
<input data-bind="textinput: number" />

How to prevent all special characters in a form

So I am trying to prevent all special characters in a form. I want only numbers and alphabet characters. For some reason my javascript below is always shows special characters event if I have only "232 elm".
I also want to use a period or exlamation point. Mainly I am trying to prevent these ¡™£¢∞§¶•ªº. We have users that like to use the degree symbol instead of spelling "degree".
This code always shows the alert no matter what is typed?
var alphanumers = /^[a-zA-Z0-9]+$/;
if(!alphanumers.test($("#notes").val())){
alert('You have special characters on instructions field.');
e.preventDefault();
return false;
}

This works for me:
HTML:
<h1>DEMO1</h1>
<input type="text" id="data" name="data" onkeyup="checkInput()">
<h1>DEMO2</h1>
<form action="#" method="post" onsubmit="return checkForm(this)">
<input type="text" id="data2" name="data" value="123abc+-*/">
<input type="submit">
</form>
Javascript:
DEMO1:
function checkInput(){
var testit = $('#data').val();
if( /[^a-zA-Z0-9\-\/]/.test( testit ) ) {
$('#data').css('background', '#f00');
}else{
$('#data').css('background', '#fff');
}
}
DEMO2:
function checkForm( theForm ){
var testit = $('#data2').val();
if( /[^a-zA-Z0-9\-\/]/.test( testit ) ) {
$('#data2').css('background', '#f00');
return false;
}else{
$('#data2').css('background', '#fff');
return true;
}
}
Demo: http://codesheet.org/codesheet/dMslCMmZ

I totally love this script! :
$("input").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
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: Ctrl+C
(e.keyCode == 67 && e.ctrlKey === true) ||
// Allow: Ctrl+X
(e.keyCode == 88 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number or alphabet and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 90)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
Here is the original source on stackoverflow, its for inputs to stop anything but nubers, i modified it a bit, hope it helps!
Try the jsfiddle

Validate and append phone input Jquery

I have some input field that always has to have + first in input
HTML
<input id="phone">
JS
$("#phone").keydown(function (e) {
$(this).get(0).value+="+";
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// 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();
}
});
The problem is you can see in this fiddle
http://fiddle.jshell.net/nqkeuspf/
UPDATE
$("#phone").keydown(function (e) {
var firstChar = $(this).val().substr(0, 1);
// Check first character.
if (firstChar != '+'){
$(this).val('+' + $(this).val())
}
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190,107]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// 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();
}
});
The problem is that it doesn not check +
Fiddle
http://fiddle.jshell.net/bjsrk83j/3/

Add this as keypress handler. It allows only numbers and you can supply it with a filter to allow other characters like +. Esc allows the user to cancel.
function escapeRegExp(str) {
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}
function handleInputKey(filter, e) // append filter as string '+-.,' for example.
{
if (!e) {
var e = window.event;
}
//allow only numeric input
//48-57 and 96-105 (keyboard left and numpad)
//also delete, back space, esc, enter, arrows and tab
if ((filter && filter.match(escapeRegExp(String.fromCharCode(e.which)))) || ((e.keyCode >= 48 && e.keyCode <= 57) && (!e.shiftKey && !e.altKey && !e.ctrlKey))) {
return true;
} else {
e.preventDefault();
return false;
}
}
//the onkeydown handler
function handleInputKeyFinish(e) {
if (!e) {
var e = window.event;
}
if (e.keyCode == 27) {
this.blur();
}
}
function stripAndAppendPlus(e) {
//when the users pastes a value delete invalid characters.
e.target.value = e.target.value.replace(/[^0-9]/g, "");
e.target.value = "+" + e.target.value;
}
$("#phone").keydown(handleInputKeyFinish);
$("#phone").keypress(handleInputKey.bind($("#phone")[0], null));
$("#phone").blur(stripAndAppendPlus);
Solution in Fiddle: http://fiddle.jshell.net/bqa87bwh/1/
Even simpler not using jQuery or JavaScript. This is HTML5 so not compatible with older browsers.
<input type="phone" pattern="^\+?\d{7,13}$" required />
pattern checks the input against a reg ex. This reg ex allows phone numbers consisting out of 7 to 13 numbers and they can begin with a +.
required --> this field has to contain a value otherwise the form won't be submitted.
Solution in Fiddle: http://fiddle.jshell.net/e76t41rj/1/

How can I alow delete, backspace, and disable spacebar in javascript?

How can I alow upper alphabet,lower alphabet, delete, backspace, and disable spacebar in textbox?
<html>
<head>
<script type="text/javascript">
function foo(e) {
var allow=' ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz_'
var k;
k=document.all?parseInt(e.keyCode): parseInt(e.which);
return (allow.indexOf(String.fromCharCode(k))!=-1);
}
</script>
</head>
<body>
<input type="text" onKeyPress="return foo(event)" />
</body>
</html>
Please help me thanks...

Try Jquery Some What Like This and Work on it.
$("[id*='yourid']").keydown(function (event) {
// Allow: backspace, delete, tab, escape, and enter
if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
// Allow: Ctrl+A
(event.keyCode == 65 && event.ctrlKey === true) ||
// Allow: home, end, left, right
(event.keyCode >= 35 && event.keyCode <= 39)) {
// let it happen, don't do anything
return;
} else {
// Ensure that it is a number and stop the keypress
if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
event.preventDefault();
}
}
});

I come up with the following code:
jQuery('#input_id', function(e){
// Allow: backspace, delete, tab, escape, enter
if (jQuery.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode === 65 && e.ctrlKey === true) ||
// Allow: Ctrl+C
(e.keyCode === 67 && e.ctrlKey === true) ||
// Allow: Ctrl+X
(e.keyCode === 88 && e.ctrlKey === true) ||
// Bug in some Android devices where it is always 229
(e.keyCode === 229) ||
// Allow: home, end, left, right
(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();
}
});
In addition the form should have autocomplete="off". Without this option you might have issues with auto-complete algorithms on mobile devices.