Validate key input in field with javascript

Validate key input in field with javascript - javascript

I am using
document.getElementById('input-field').addEventListener('keyup', function (e) {
if (!String.fromCharCode(e.which).match(/[A-Za-z0-9,]/)) {
event.preventDefault();
}
});
It almost works. The problem is that I cannot use key arrows, backspace, delete, ctrl+a, etc.
How can I limit it to only those keys that will give a string representation in the specific input?

To ignore those keys you need to add a condition before validating your input.
For example you can make an array containing the list of all KeyCodes that you want to ignore and just test if the typed key isn't one of them.
Here's what you need:
document.getElementById('input-field').addEventListener('keypress', function(e) {
//An array of special Keys
var specialKeys = [37, 38, 39, 40, 8, 13, 27, 46];
if (specialKeys.indexOf(e.which) === -1) {
console.log(String.fromCharCode(e.which)+ ' Key is validated!');
if (!String.fromCharCode(e.which).match(/[A-Za-z0-9,]/)) {
event.preventDefault();
}
}
});
<input type="text" id="input-field" placeholder="input text here">
Note:
As mentioned in comments you need to use keypressevent instead of keyup to validate every inputted character immediately.

Well there is somehow to limit your input range. But I think in this case you are looking for a way to identify only printable key events.
You can achieve this by using the solution proposed by #TimDown on How to detect if the pressed key will produce a character inside an <input> text-box? applied to a keypress event as you can see on the code below. So then, you can work just with printable key events.
function isCharacterKeyPress(evt) {
if (typeof evt.which == "undefined") {
// This is IE, which only fires keypress events for printable keys
return true;
} else if (typeof evt.which == "number" && evt.which > 0) {
// In other browsers except old versions of WebKit, evt.which is
// only greater than zero if the keypress is a printable key.
// We need to filter out backspace and ctrl/alt/meta key combinations
return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8;
}
return false;
}
document.getElementById('input-field').addEventListener('keypress', function (e) {
if(isCharacterKeyPress(e)){
if (!String.fromCharCode(e.which).match(/[A-Za-z0-9,]/)) {
e.preventDefault();
}
}
});
<input type="text" id="input-field" placeholder="input text here">

Related

Validation error message removal after successful validation without button click

I have a simple form, with four fields. My problem is form validation error messages are not getting removed even after giving valid input without any click event.
Below is the example where i used keypress event to get the solution, but as keycodes are different for keyboard and numeric keypad. Is there any other way to achieve the removal of error messages immediately after successful validation input without keypress event and without button click. Below is the example code I have tried for a single field phone number.
Below is the sample:
http://jsfiddle.net/e203dLLL/
//Code to remove error msgs after giving valid input with keypress event.
$(".error").hide();
$(".validate").keypress(function(event) {
var key = event.which || event.keyCode; //use event.which if it's truthy, and default to keyCode otherwise
// Allow: backspace, delete, tab, and enter
var controlKeys = [8, 9, 13];
//for mozilla these are arrow keys
if ($.browser.mozilla) controlKeys = controlKeys.concat([37, 38, 39, 40]);
// Ctrl+ anything or one of the conttrolKeys is valid
var isControlKey = event.ctrlKey || controlKeys.join(",").match(new RegExp(key));
if (isControlKey) {
return;
}
// stop current key press if it's not a number
if (!(48 <= key && key <= 57)) {
event.preventDefault();
return;
}
});
$('.validate').keyup(function() {
var regex = new RegExp(/[^0-9]/g);
var containsNonNumeric = this.value.match(regex);
if (containsNonNumeric)
$(".error").show();
else $(".error").hide();
//this.value = this.value.replace(regex, '');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
//Sample form with one field.
<form>
Phone Number: <input type="text" name="firstname" class="validate">
<div class="error"> Error! Only numericals allowed.</div>
</form>
Please give detailed solution for Name, email and password if any alternative other than keypress event and without button click.

you can use the $.focusout() event for handling in such scenario
for example:
http://jsfiddle.net/v6ybua3j/
$(".error").hide();
$(".validate").keypress(function (event) {
var key = event.which || event.keyCode; //use event.which if it's truthy, and default to keyCode otherwise
// Allow: backspace, delete, tab, and enter
var controlKeys = [8, 9, 13];
//for mozilla these are arrow keys
if ($.browser.mozilla) controlKeys = controlKeys.concat([37, 38, 39, 40]);
// Ctrl+ anything or one of the conttrolKeys is valid
var isControlKey = event.ctrlKey || controlKeys.join(",").match(new RegExp(key));
if (isControlKey) {return;}
// stop current key press if it's not a number
if (!(48 <= key && key <= 57)) {
event.preventDefault();
return;
}
});
$('.validate').focusout(function () {
var regex = new RegExp(/[^0-9]/g);
var containsNonNumeric = this.value.match(regex);
if (containsNonNumeric)
$(".error").show();
else $(".error").hide();
//this.value = this.value.replace(regex, '');
});
Another solution is using setInterval()
Code: http://jsfiddle.net/axLg8oqt/
$(".error").hide();
setInterval(function(){
var regex = new RegExp(/[^0-9]/g);
var containsNonNumeric = $('.validate').val().match(regex);
if (containsNonNumeric)
$(".error").show();
else $(".error").hide();
},300)

Alert and not allow if same word written twice in an input jquery or js

This is my input:
<input type='text' class='myprofiletags' name='my_profile_tags' value='' />
I want to alert and forbid the user if he/she writes the same word twice. I am entering values with commma e.g
games, animes, movies
jQuery('.myprofiletags').keypress(function(e)
{
if (jQuery(this).val().match(/,/g).length >= 10)
{
if(e.keyCode == 8 || e.keyCode == 46 || e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 || e.keyCode == 40)
{
}
else
{
e.preventDefault(); // stops the keypress occuring
alert('No more profile tags are allowed');
}
}
});

Set an event handler (onkeyup) on input box so that whenever user hits a key the handler gets called
In event handler take the values of input box and split them on comma
Check if any value is duplicate
If no return true
If yes show an alert
Synopsis:
$(".myprofiletags").keydown (function (e) {
alert ($(this).val());
});
You can also use change
$('input[name^="text"]').change(function() {
Edit: You are going in right direction, just split the value on comma and use each splitted value as an item of array.
See how to do that:
Split comma-separated input box values into array in jquery, and loop through it
Convert comma separated string to array

Validating a textbox while typing special characters and having specific length

I have a textbox.I have to validate for special characters and max 15 characters in length.
I have used below code for validating.
<input type="text" class="textFlag" onkeyup="ValidateFlagText(this)"/>
//function checks special character entry and total 15
//character checks
function ValidateFlagText(textBoxObj) {
//skip events for space and control keys
if (event.keyCode != 37 && event.keyCode != 39) {
var originalValue = textBoxObj.value;
var charCount = textBoxObj.value.length;
if (!(!originalValue.match(/[_\W]/))) {
alert("special characters not allowed");
textBoxObj.value = originalValue.substring(0, charCount - 1);
}
if (charCount > 15) {
alert("maximum 15 characters allowed");
textBoxObj.value = originalValue.substring(0, charCount - 1);
}
textBoxObj.value = textBoxObj.value.substring(0, 15);
}
}
One issue here is if i am holding and pressing. I have created a fiddle.
http://jsfiddle.net/mnsscorp/QGRHP/6/
Thanks in advance.

As per this on MDN, 'auto repeat' (which is what happens when you hold down a key), fires the events: keydown, keypress, keydown, keypress... then finally a keyup.
If you want to check for length for each new character, then change your markup to listen to either keydown or keypress.

onKeyup should be:
<input type="text" class="textFlag" onkeydown="ValidateFlagText(this)"/>
onkeypress : invokes JavaScript code when a key is pressed
onkeydown : invokes JavaScript code when a key is held down (but not yet released)
onkeyup : invokes JavaScript code when a key is has been released after being pressed.

I used both onkeydown and onkeyup and the problem solved. Used like this:
<input type='text' id='titleNewColumn' onkeydown='ValidateFlagText(this)' onkeyup='ValidateFlagText(this)' />

Intercepting keyboard presses

I have an input box that always has focus. The commands that go into this input box are always letters. If the user presses a number, I would like it not to be added to the text box, but instead use it to run a different command (just like a hotkey).
The way I've seen this implemented is by looking at the keyup event and removing unwanted characters. Instead, is there any way to to intercept the keyboard input and check what the value is before the insert?
I've thought about creating a custom input field using a div and intercepting all the keyboard commands. Is there a way to get a blinking caret so that it looks like an input box?

Sounds like you want a contenteditable div:
<div id="editor" contenteditable="true"></div>
You can listen for keydown events and prevent them if they aren't letters:
$("#editor").keydown(function (e) {
if (e.which > 90 || (e.which > 48 && e.which < 65)) {
e.preventDefault();
}
});
To process the numbers as "hotkeys" you would just determine which key e.which is and act accordingly.
Example: http://jsfiddle.net/g3mgR/1

Something like this will work:
<input type="text" id="txt" />
For jQuery:
$('#txt').keydown(function (e) {
var key = e.charCode || e.keyCode || 0;
if (key > 46 && key < 58) {
event.preventDefault();
alert('its a number, do something');
}
});
Here is the Fiddle

Use keydown instead of keyup.

Use the keypress event in combination with String.fromCharCode:
document.getElementById('yourTextBoxID').onkeypress = function () {
var characterPressed = String.fromCharCode(event.keyCode);
if (characterPressed.test(/[a-z]/i)) {
// user pressed a letter
} else {
// user did not press a letter
}
};
http://jsfiddle.net/TSB9r/3/

Best way to restrict a text field to numbers only?

I'm using the following Javascript to restrict a text field on my website to only accept numerical input, and no other letters or characters. The problem is, it REALLY rejects all other key inputs, like ctrl-A to select the text, or even any other browser functions like ctrl-T or ctrl-W while the text box is selected. Does anyone know of a better script to only allow numerical input, but not block normal commands (that aren't being directly input into the field)? Thanks
Here is the code I'm using now:
function numbersonly(e, decimal)
{
var key;
var keychar;
if (window.event)
key = window.event.keyCode;
else if (e)
key = e.which;
else
return true;
keychar = String.fromCharCode(key);
if ((key==null) || (key==0) || (key==8) || (key==9) || (key==13) || (key==27))
return true;
else if ((("0123456789").indexOf(keychar) > -1))
return true;
else if (decimal && (keychar == "."))
return true;
else
return false;
}
Edit: None of the solutions provided have solved my problem of allowing commands like ctrl-A while the text box is selected. That was the whole point of my asking here, so I have gone back to using my original script. Oh well.

This is something I made another time for just numbers, it will allow all the formatters as well.
jQuery
$('input').keypress(function(e) {
var a = [];
var k = e.which;
for (i = 48; i < 58; i++)
a.push(i);
if (!(a.indexOf(k)>=0))
e.preventDefault();
});
Try it
http://jsfiddle.net/zpg8k/
As a note, you'll want to filter on submit/server side as well, for sake of pasting/context menu and browsers that don't support the paste event.
Edit to elaborate on multiple methods
I see you're bouncing around the 'accepted' answer, so I'll clear something up. You can really use any of the methods listed here, they all work. What I'd personally do is use mine for live client side filtering, and then on submit and server side use RegEx as suggested by others. However, no client side by itself will be 100% effective as there is nothing stopping me from putting document.getElementById('theInput').value = 'Hey, letters.';
in the console and bypassing any clientside verification (except for polling, but I could just cancel the setInterval from the console as well). Use whichever client side solution you like, but be sure you implement something on submit and server side as well.
Edit 2 - #Tim Down
Alright, per the comments I had to adjust two things I didn't think of. First, keypress instead of keydown, which has been updated, but the lack of indexOf in IE (seriously Microsoft!?) breaks the example above as well. Here's an alternative
$('input').keypress(function(e) {
var a = [];
var k = e.which;
for (i = 48; i < 58; i++)
a.push(i);
if (!($.inArray(k,a)>=0))
e.preventDefault();
});
New jsfiddle: http://jsfiddle.net/umNuB/

This works in IE, Chrome AND Firefox:
<input type="text" onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));" />

.keypress(function(e)
{
var key_codes = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 0, 8];
if (!($.inArray(e.which, key_codes) >= 0)) {
e.preventDefault();
}
});
You need Backspace and Delete keys too ;)

http://jsfiddle.net/PgHFp/
<html>
<head>
<title>Test</title>
<script language="javascript">
function checkInput(ob) {
var invalidChars = /[^0-9]/gi
if(invalidChars.test(ob.value)) {
ob.value = ob.value.replace(invalidChars,"");
}
}
</script>
</head>
<body>
<input type="text" onkeyup="checkInput(this)"/>
</body>
</html>

Just use regex to get rid of any non number characters whenever a key is pressed or the textbox loses focus.
var numInput;
window.onload = function () {
numInput = document.getElementById('numonly');
numInput.onkeydown = numInput.onblur = numInput.onkeyup = function()
{
numInput.value = numInput.value.replace(/[^0-9]+/,"");
}
}

The only event that contains information about the character typed is keypress. Anything character-related you may infer from the keyCode property of keydown or keyup events is unreliable and dependent on a particular keyboard mapping. The following will prevent non-numeric keyboard input all major browsers by using the character obtained from the keypress event. It won't prevent the user from pasting or dragging non-numeric text in.
var input = document.getElementById("your_input");
input.onkeypress = function(evt) {
evt = evt || window.event;
if (!evt.ctrlKey && !evt.metaKey && !evt.altKey) {
var charCode = (typeof evt.which == "undefined") ? evt.keyCode : evt.which;
if (charCode && !/\d/.test(String.fromCharCode(charCode))) {
return false;
}
}
};

I use this:
oEl.keypress(function(ev)
{
var sKey = String.fromCharCode(ev.which);
if (!sKey.match(/[0-9]/) || !sKey === "")
ev.preventDefault();
});
The advantage is, that every key which does not provide an input to the field is still allowed, so you don't have to worry about every single special key. Even combos like CTRL + R do still work.
EDIT
As this is not working in Firefox I had to modify the function a little:
oEl.keypress(function(ev)
{
var iKeyCode = ev.which || ev.keyCode;
var aSpecialKeysForFirefox = [8, 9, 13, 27, 37, 38, 39, 40, 46];
var sKey = String.fromCharCode(iKeyCode);
if (sKey !== "" && $.inArray(iKeyCode, aSpecialKeysForFirefox ) < 0 && !sKey.match(/[0-9]/)) {
ev.preventDefault();
}
});
Explanation
All Browsers handle jquerys keypress event differently. To make it work in FF the $.inArray check is added. As firefoxs keypress-event doesn't trigger when combinations like strg+tab are used, but the others do, the key.match approach still adds a little value to the latter, as it enables those combinations.

Maybe you are using bootstrap. If so, this may suffice:
<input type="text" data-mask="9999999">
Input mask

The following code is something I use extensively. I found the script in a forum, but modified and expanded it to accommodate my needs:
<script type="text/javascript">
// Restrict user input in a text field
// create as many regular expressions here as you need:
var digitsOnly = /[1234567890]/g;
var integerOnly = /[0-9\.]/g;
var alphaOnly = /[A-Za-z]/g;
var usernameOnly = /[0-9A-Za-z\._-]/g;
function restrictInput(myfield, e, restrictionType, checkdot){
if (!e) var e = window.event
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
var character = String.fromCharCode(code);
// if user pressed esc... remove focus from field...
if (code==27) { this.blur(); return false; }
// ignore if the user presses other keys
// strange because code: 39 is the down key AND ' key...
// and DEL also equals .
if (!e.ctrlKey && code!=9 && code!=8 && code!=36 && code!=37 && code!=38 && (code!=39 || (code==39 && character=="'")) && code!=40) {
if (character.match(restrictionType)) {
if(checkdot == "checkdot"){
return !isNaN(myfield.value.toString() + character);
} else {
return true;
}
} else {
return false;
}
}
}
</script>
Different usage methods would be:
<!-- To accept only alphabets -->
<input type="text" onkeypress="return restrictInput(this, event, alphaOnly);">
<!-- To accept only numbers without dot -->
<input type="text" onkeypress="return restrictInput(this, event, digitsOnly);">
<!-- To accept only numbers and dot -->
<input type="text" onkeypress="return restrictInput(this, event, integerOnly);">
<!-- To accept only numbers and only one dot -->
<input type="text" onkeypress="return restrictInput(this, event, integerOnly, 'checkdot');">
<!-- To accept only characters for a username field -->
<input type="text" onkeypress="return restrictInput(this, event, usernameOnly);">

Add <script type="text/javascript" src="jquery.numeric.js"></script> then use
$("element").numeric({ decimal: false, negative: false });

shorter way and easy to understand:
$('#someID').keypress(function(e) {
var k = e.which;
if (k <= 48 || k >= 58) {e.preventDefault()};
});

This is a variation on Robert's answer that allows a single decimal point to be entered. If a decimal point has already been entered, only numbers are accepted as input.
JSFiddle - decimal number input
// Allow only decimal number input
$('#decimalInput').keypress(function (e) {
var a = [];
var k = e.which;
for (i = 48; i < 58; i++)
a.push(i);
// allow a max of 1 decimal point to be entered
if (this.value.indexOf(".") === -1) {
a.push(46);
}
if (!(a.indexOf(k) >= 0)) e.preventDefault();
$('span').text('KeyCode: ' + k);
});

I know that there are already many answers but for the sake of simplicity i would like to add another answer which is simple and self explanatory in which we do not have to remember keycodes and it also works across all browsers.
document.getElementById('myinput').onkeydown = function(e)
{
console.log(e.key);
//console.log(e.target.value);
switch (e.key)
{
case "1":
case "2":
case "3":
case "4":
case "5":
case "6":
case "7":
case "8":
case "9":
case "0":
case "Backspace":
return true;
break;
case ".":
if (e.target.value.indexOf(".") == -1)
{
return true;
}
else
{
return false;
}
break;
default:
return false;
}
}
<input type="text" placeholder="Enter Value" id="myinput" />

It's worth pointing out that no matter how tightly you manage to control this via the front end (Javascript, HTML, etc), you still need to validate it at the server, because there's nothing to stop a user from turning off javascript, or even deliberately posting junk to your form to try to hack you.
My advice: Use the HTML5 markup so that browsers which support it will use it. Also use the JQuery option previously suggested (the inital solution may have flaws, but it seems like the comments have been working through that). And then do server-side validation as well.

this will enable the numpad inputs also.
.keydown(function(event){
if(event.keyCode == 8 || event.keyCode == 46)
return true;
if(event.keyCode >= 96 && event.keyCode <= 105)
return true;
if(isNaN(parseInt(String.fromCharCode(event.keyCode),10)))
return false;
});

In order to block anything but numbers from being input into a text field but still allowing for other buttons to work (such as delete, shift, tab, etc.) look at a reference of the Javascript key codes; anything from 65 on up (to 222) can be blocked.
Using Jquery and Javascript, that would look like:
$('#textFieldId').keydown(function(event) {
if ( event.keyCode > 64 ) {
event.preventDefault();
}
});
The key codes will be the same in Javascript whether or not Jquery is used.

Here is my solution: a combination of the working ones below.
var checkInput = function(e) {
if (!e) {
e = window.event;
}
var code = e.keyCode || e.which;
if (!e.ctrlKey) {
//46, 8, 9, 27, 13 = backspace, delete, tab, escape, and enter
if (code == 8 || code == 13 || code == 9 || code == 27 || code == 46)
return true;
//35..39 - home, end, left, right
if (code >= 35 && code <= 39)
return true;
//numpad numbers
if (code >= 96 && code <= 105)
return true;
//keyboard numbers
if (isNaN(parseInt(String.fromCharCode(code), 10))) {
e.preventDefault();
return false;
}
}
return true;
};

I came across your question while trying to figure this out myself. Here is the solution that I came up with.
// Prevent user from entering non-numeric characters in number boxes.
(function (inputs) {
var input;
var f = function (e) {
var unicodeRe = /U\+(\d+)/;
// Chrome doesn't support the standard key property, so use keyIdentifier instead.
// Instead of the actual character that "key" returns, keyIdentifier returns
// A string such as "U+004F" representing the unicode character.
// For special characters (e.g., "Shift", a string containing the name of the key is returned.)
var ch = e.key || e.keyIdentifier;
var match = ch.match(unicodeRe);
// keyIdentifier returns a unicode. Convert to string.
if (match) {
ch = String.fromCharCode(Number.parseInt(match[1], 16));
}
console.log(ch);
if (ch.length === 1 && /[^0-9]/.test(ch)) {
if (!/[\b]/.test(ch)) { // Don't prevent backspace.
e.preventDefault();
}
}
};
for (var i = 0, l = inputs.length; i < l; i += 1) {
input = inputs[i];
input.onkeydown = f;
}
}(document.querySelectorAll("input[type=number],#routeFilterBox")));
Edit: I've discovered that my solution does not allow the user to enter numbers via the numpad in Chrome. The 0-9 keypad keys seem to be returning the character "`" for 0 and A-I for the rest of the number keys.

All of the answers are outdated, lengthy and will cause annoyance to your users. Most of them don’t even filter or allow pasted content.
Instead of filtering the input, do some validation before submitting the form and then also server-side.
HTML has validation included:
<input type="number" pattern="[0-9]+">
This also enables the number keyboard on mobile.

This is my plugin for that case:
(function( $ ) {
$.fn.numbers = function(options) {
$(this).keypress(function(evt){
var setting = $.extend( {
'digits' : 8
}, options);
if($(this).val().length > (setting.digits - 1) && evt.which != 8){
evt.preventDefault();
}
else{
if(evt.which < 48 || evt.which > 57){
if(evt.keyCode != 8){
evt.preventDefault();
}
}
}
});
};
})( jQuery );
Use:
$('#limin').numbers({digits:3});
$('#limax').numbers();

There is my current solution of numeric input, need to test in different browsers but seems to work
Support comma and period delimiter (czech native is comma), space and numpad/keyboard numbers input. Allow Ctrl+C Ctrl+A or Ctrl+X, arrow navigation and delete block Ctrl+V. React on escape key by blurring input.
Watch my Coffee script:
(($) ->
$.fn.onlyNumbers = ->
#each ->
$(#).keydown (e) ->
# get code of key
code = if e.keyCode then e.keyCode else e.which
return $(#).blur() if code is 27 # blur on escape
return if code in [46, 8, 9, 13] # 46, 8, 9, 27, 13 = backspace, delete, tab, escape, and enter
return if (e.ctrlKey or e.metaKey) and code in [65, 67, 88] # ctrl|command + [a, c, x]
return if code in [96..105] # numpad numbers
return if code in [48..57] # numbers on keyboard
return if code in [35..39] # 35..39 - home, end, left, right
return if code in [188, 190, 32] # comma, period, space
return if code in [44] # comma, period,
e.returnValue = false # IE hate you
e.preventDefault();
$(#).keypress (e) ->
code = if e.keyCode then e.keyCode else e.which
return if code in [44, 46, 32] # comma, period, space
return if code in [48..57] # numbers on keyboard
e.returnValue = false # IE hate you
e.preventDefault();
) jQuery
You can get compiled Javascript here http://goo.gl/SbyhXN

My functions:
$('.input_integer_only').on('input', function(e) {
$(this).val($(this).val().replace(/[^0-9]/g, ''));
});
$('.input_float_only').on('input', function(e) {
var $var = $(this).val().replace(/[^0-9\.]/g, '');
var $aVar = $var.split('.');
if($aVar.length > 2) {
$var = $aVar[0] + '.' + $aVar[1];
}
$(this).val($var);
});

You can make changes to accept the keycode for Ctrl keys: 17, 18, 19, 20.
Then your code will be like:
function numbersonly(e, decimal) {
var key;
var keychar;
if (window.event)
key = window.event.keyCode;
else if (e)
key = e.which;
else
return true;
keychar = String.fromCharCode(key);
if ((key==null) || (key==0) || (key==8) || (key==9) || (key==13) || (key==27) || (key==17) || (key==18) || (key==19) || (key==20))
return true;
else if ((("0123456789").indexOf(keychar) > -1))
return true;
else if (decimal && (keychar == "."))
return true;
else
return false;
}

document.getElementById('myinput').onkeydown = function(e) {
if(!((e.keyCode > 95 && e.keyCode < 106)
|| (e.keyCode > 47 && e.keyCode < 58)
|| e.keyCode == 8
|| e.keyCode == 9)) {
return false;
}
}

You can do like this to accept only Numbers in text Box,
function onChange(event){
var ckeckChars = /[^0-9]/gi;
if(checkChars.test(event.target.value)) {
event.target.value = event.target.value.replace(ckeckChars,"");
}

I am using below in Angular to restrict character
in HTML
For Number Only
<input
type="text"
id="score"
(keypress) ="onInputChange($event,'[0-9]')"
maxlength="3"
class="form-control">
for Alphabets Only
<input
type="text"
id="state"
(keypress) ="onInputChange($event,'[a-zA-Z]')"
maxlength="3"
class="form-control">
In TypeScript
onInputChange(event: any, inpPattern:string): void {
var input = event.key;
if(input.match(inpPattern)==null){
event.preventDefault();
}
}

This JavaScript function will be used to restrict alphabets and
special characters in Textbox , only numbers, delete, arrow keys and
backspace will be allowed. JavaScript Code Snippet - Allow Numbers
in TextBox, Restrict Alphabets and Special Characters
Tested in IE & Chrome.
JavaScript function
<script type="text/javascript">
/*code: 48-57 Numbers
8 - Backspace,
35 - home key, 36 - End key
37-40: Arrow keys, 46 - Delete key*/
function restrictAlphabets(e){
var flag = false;
var x = e.which || e.keycode;
if ((x >= 48 && x <= 57) || x == 8 ||
(x >= 35 && x <= 40) || x == 46)
flag = true;
else
flag = false;
if (flag && e.keyCode === 46 && $(e.currentTarget).val().split('.').length === 2) {
flag = false;
}
return flag;
}
</script>
HTML Source Code with JavaScript
<html>
<head>
<title>JavaScript - Allow only numbers in TextBox (Restrict Alphabets and Special Characters).</title>
<script type="text/javascript">
/*code: 48-57 Numbers
8 - Backspace,
35 - home key, 36 - End key
37-40: Arrow keys, 46 - Delete key*/
function restrictAlphabets(e){
var x=e.which||e.keycode;
if((x>=48 && x<=57) || x==8 ||
(x>=35 && x<=40)|| x==46)
return true;
else
return false;
}
</script>
</head>
<body style="text-align: center;">
<h1>JavaScript - Allow only numbers in TextBox (Restrict Alphabets and Special Characters).</h1>
<big>Enter numbers only: </big>
<input type="text" onkeypress='return restrictAlphabets(event)'/>
</body>
</html>
Refrence

You can handle te event on html by introducing keypresshandler function
function keypresshandler(event)
{
var charCode = event.keyCode;
//You condition
if (charCode == 58 ){
event.preventDefault();
return false;
}
}

Javascript is often used on the browser client side to perform simple tasks that would otherwise require a full postback to the server. Many of those simple tasks involve processing text or characters entered into a form element on a web page, and it is often necessary to know the javascript keycode associated with a character. Here is a reference.
Press a key in the text box below to see the corresponding Javascript key code.
function restrictCharacters(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (((charCode >= '48') && (charCode <= '57')) || (charCode == '44')) {
return true;
}
else {
return false;
}
}
Enter Text:
<input type="text" id="number" onkeypress="return restrictCharacters(event);" />

Develop Reference

JavaScript is the programming language of the Web.

Validate key input in field with javascript - javascript

Related

Validation error message removal after successful validation without button click

Alert and not allow if same word written twice in an input jquery or js

Validating a textbox while typing special characters and having specific length

Intercepting keyboard presses

Best way to restrict a text field to numbers only?

Categories

Resources