We Keep Coding

How do I create a keyboard event that lets me only use the backspace and numbers (on top of keyboard and numpad)?

function handleSpinnerInput(event) {
var keyID = event.keyCode
if (keyID < 48 || keyID > 57 ) {
/*
* If it isn't a number, pretend the key was never pressed at all. This
* key range works for both the number pad and the numbers on the top of
* the keyboard. I've tested this on IE, Firefox, and Chrome to verify
* it works on the latest version. However, I need this to work on Firefox v.31.
*/
event.preventDefault();
return false;
}
}
I am using the onkeydown() function to invoke on an input field but only the top number of the keyboard work and it doesn't even let me type the backspace in the older version. I see that the numpad keycodes are 96-105 and the backspace keycode is 46. how would I include that in my conditional and should I set it to ignore keycodes that are not the ones specified?
EDIT: the code in top worked with the onkeypress() function but I have since changed it to onkeydown() since it didnt work on older firefox.
EDIT:
function handleSpinnerInput(event) {
var keyCode = event.keyCode ;
if(!(Number(keyCode) >= 0 && Number(keyCode) <= 9) && keyCode != 'Backspace')
event.preventDefault();
return false;
}
}

Use:
let input = document.querySelector('input')
input.addEventListener('keydown', handleSpinnerInput)
function handleSpinnerInput(event) {
if(!(Number(event.key) >= 0 && Number(event.key) <= 9) && event.key != 'Backspace') // Checks whether the key is different from the number or backspace
event.preventDefault()
}
<input type="text">
OR
function handleSpinnerInput(event) {
console.log(event.keyCode)
let isNumber = (event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 || event.keycode <= 105)
let backspace = event.keyCode == 46
if(!isNumber && !backspace)
event.preventDefault()
}
<input type="text" onkeydown="handleSpinnerInput(event)">
Doubts? comment

Regex Issue on Firefox

I'm trying to use a Regex to only allow letters, '-', and the backspace on input fields. I need to be able to use the left and right arrow keys and the delete key. I was attempting to do this with:
$("#input").keypress(function (e) {
var regex = new RegExp("^[a-zA-Z-\b]+$");
var key = String.fromCharCode(!e.charCode ? e.which : e.charCode);
if((!(e.keyCode == 37 || e.keyCode == 39 || e.keyCode == 46))){
if(!regex.test(key)){
return false;
}
}
});
where I would check if the key is not the left arrow (37), right arrow (39), or the delete key (46), and then check if the key is not in the regex.
This works on IE and Chrome, however on Firefox the key codes 37 and 39 also correspond to ' and % respectively.
The key codes work on all of the browsers, the issue is that [on firefox only] if I allow for the arrows and delete keys it also allows for the ' and % characters.

I was actually able to figure it out. For IE and Chrome the keyCode and Which values are the same. On Firefox the keyCode value of the left arrow is 37, but the which value is 0.
I was able to solve it doing this:
$("#input").keypress(function (e) {
var regex = new RegExp("^[a-zA-Z-\b]+$");
var key = String.fromCharCode(!e.charCode ? e.which : e.charCode);
if(!((e.keyCode == 37 && e.which == 0) || (e.keyCode == 39 && e.which == 0) || (e.keyCode == 46 && e.which == 0))){
if(!regex.test(key)){
return false;
}
}
});

Stopping Characters From Being Entered In Form Field

I want to restrict all symbols from being entered into my form fields in html.
Here is my code...
<script>
$('#location').keypress(function (e) {
var regex = new RegExp("[^a-zA-Z0-9]+$");
var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
if (regex.test(str)) {
return true;
}
e.preventDefault();
return false;
});
</script>
But that code does not allow any spaces or even using the delete key. I want everything to work but don't want any symbols (ie. $##%^!'"[]{}() etc...)

You could remove the invalid characters on keyup instead.
$('#location').keyup(function(e){
$(this).val($(this).val().replace(/[^a-zA-Z0-9\s]/g, '');
});
Otherwise you have to specify the keyCode of the keys you want to allow.
http://www.asciitable.com/

Just get the range of letters and numbers.
48 - 57 (0-9)
65 - 90 (A-Z)
97 - 122 (a-z)
<script>
$('#location').bind('keypress', function (e) {
if (e.which < 48 ||
(e.which > 57 && e.which < 65) ||
(e.which > 90 && e.which < 97) ||
e.which > 122) {
e.preventDefault();
}
});
</script>

How to prevent users from entering invalid characters inside an input field

Given a text input field. How can I prevent users from entering spaces, and other other than letters numbers or dashes (-).
Alphanumerics only - "The alphanumeric character set consists of the numbers 0 to 9 and letters A to Z. In the perl programming language, the underscore character ( _ ) is also considered to be a member of the alphanumeric set of characters"
This is for a field where users can pick a custom url. I would like to prevent users from entering invalid characters.
Ideas? Thanks

You can do this using the jQuery keyup(..) method. You will want to check that the event.keyCode is something valid. If it is not valid, you can prevent the event with preventDefault().
Remember to validate the data sent to the server because anything you do in javascript can be subverted.
Here is a library to do it for you: http://www.itgroup.com.ph/alphanumeric/

DEMO - JS Fiddle Link
Sorry for the late response. Though my answer is late. I have modified few changes to the answer and here it goes.
Validation Required
Restrict Digits entering on initial
Restrict Spaces, special characters but allow backspace and delete
Enable Alpha Numeric Characters
<input name="pac_code" id="input_8_6" type="text" value="" class="form-control medium pacerror pacvalid" data-rule-maxlength="9" data-rule-minlength="9" maxlength="9" minlength="9" placeholder="Porting authorisation code (PAC) *" data-rule-required="true"
autocomplete="off" size="9">
<label for="input_8_6" style="color: #ff0000;font-weight: 300;font-size: 12px;margin-bottom: 1%;">Example: ABC123456</label><br />
<label class="PAC_error error" style="display:none;">Invalid PAC Format</label>
</div>
JQuery
jQuery(document).ready(function() {
$('#input_8_6').bind('keypress', function(event) {
var regex = new RegExp("^[a-zA-Z0-9\b]+$");
var regchar = new RegExp("^[a-zA-Z\b]+$");
var regnum = new RegExp("^[0-9\b]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
var pacvalue = $(this).val().length;
if (!regex.test(key)) {
event.preventDefault();
return false;
} else if (pacvalue <= 2) {
for (i = 0; i <= 2; i++) {
if (!regchar.test(key)) {
event.preventDefault();
return false;
}
}
} else if (pacvalue >= 3) {
for (j = 4; j <= 9; j++) {
if (!regnum.test(key)) {
event.preventDefault();
return false;
}
}
} else {
return true;
}
});
});

There are plenty of Javascript validation libraries out there. A quick Google search for 'javascript validation' produced the JQuery Validation plugin plugin as the first hit, so that's probably a good place to start.
As #Chris Cooper said, make sure that you also do server-side validation, because it's pretty trivial for a user to turn off javascript and avoid your client-side validation rules.

Though my answer is very late, but this may help for further readers/techie's.
Who wants to implement a textbox to accepts with below condition.
should accept Alphabets.
should accept Numbers.
should not accept any special characters.
Below is the code.
$("input[name='txtExample'] ").focus(function (e) {
if (!(e.which != 8 && e.which != 0 && ((e.which >= 48 && e.which <= 57) || (e.which >= 65 && e.which <= 90) || (e.which >= 97 && e.which <= 122) ))) {
event.preventDefault();
}
}).keyup(function (e) {
if (!(e.which != 8 && e.which != 0 && ((e.which >= 48 && e.which <= 57) || (e.which >= 65 && e.which <= 90) || (e.which >= 97 && e.which <= 122) ))) {
event.preventDefault();
}
}).keypress(function (e) {
if (!(e.which != 8 && e.which != 0 && ((e.which >= 48 && e.which <= 57) || (e.which >= 65 && e.which <= 90) || (e.which >= 97 && e.which <= 122) ))) {
event.preventDefault();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="txtExample"/>
added with example.

Javascript limit text input characters

I am wanting to restrict the input characters for a text box to [a-z0-9_-]. However whenever if do this buttons like backspace and the arrow keys don't work. I have found some attempts on this website and others but either they don't work properly on all browsers or they use a black list. For example the W3Schools website example black lists numbers. Is there a way to use white list (the one above) and still allow keys like backspace, arrows, home, end etc? Or do I have to add everyone of the key codes that match the keys I want to allow? I do something like this (this is shortened for simplicity).
EDIT - Added code
<input type="text" onkeypress="return checkInput();">
function checkInput(){
return /[a-z0-9_-]/gi.test(String.fromCharCode(window.event.keyCode));
}

Just change the regex in the example to something like this:
numcheck = /[^a-z0-9_-]/;
Or better yet, avoid the double negative with:
numcheck = /[a-z0-9_-]/;
return numcheck.test(keychar);
Then you can look up the keycodes of backspace, etc. and check for them too:
if (keychar === 8) return true;
...
Or even put them in your regex:
numcheck = /[a-z0-9_\x08-]/;

You haven't provided any code samples, so it's hard to be specific in a response, but as a general strategy, try this: instead of trying to whitelist characters that can be input while they are being typed in, validate the contents of the text box after every key stroke to make sure that it still contains valid characters. If it doesn't, remove the last character entered.
This approach will allow special keys like backspace, etc., while at the same time achieve what it sounds like you are really after: a valid value in the text box.

Yes you can limit the input of characters. For example create a function that checks what is going on, return true if everything is OK and false if not:
// return true for 1234567890A-Za-z - _
function InputCheck(e) {
if ((e.shiftKey && e.keyCode == 45) || e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
if (e.which == 45 || e.which == 95 || (e.which >= 65 && e.which <= 90) || (e.which >= 97 && e.which <= 122))
return true;
return false;
}
return true;
}
once you have the function, hook it into you input (this is with jQuery):
$('#InputID').keypress(InputCheck);
You can make as complicated a check as you want, for example this will allow for USD money values:
function InputCheck(e) {
if ((e.shiftKey && e.keyCode == 45) || e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57) && e.which != 46 && e.which != 36) {
return false;
}
// . = 46
// $ = 36
var text = $(this).val();
// Dollar sign first char only
if (e.which == 36 && text.length != 0) {
return false;
}
// Only one decimal point
if (e.which == 46 && text.indexOf('.') != -1) {
return false;
}
// Only 2 numbers after decimal
if (text.indexOf('.') != -1 && (text.length - text.indexOf('.')) > 2) {
return false;
}
return true;
}

You can press any key you like, as long as you keep the value from including anything
not in the white-list.
inputelement.onkeyup=function(e){
e=e || window.event;
var who=e.target || e.srcElement;
who.value= who.value.replace(/[^\w-]+/g,'');
}

Add this code to onkeypress event.
var code;
document.all ? code = e.keyCode : code = e.which;
return ((code > 64 && code < 91) || (code > 96 && code < 123) || code == 8 || code == 32 || (code >= 48 && code <= 57));
For browser compatibility, You can add
var k = e.keyCode == 0 ? e.charCode : e.keyCode;