Is there a quick way to set an HTML text input (<input type=text />
) to only allow numeric keystrokes (plus '.')?
74 Answers
Note: This is an updated answer. Comments below refer to an old version which messed around with keycodes.
JavaScript
Try it yourself on JSFiddle.
You can filter the input values of a text <input>
with the following setInputFilter
function (supports Copy+Paste, Drag+Drop, keyboard shortcuts, context menu operations, non-typeable keys, the caret position, different keyboard layouts, validity error message, and all browsers since IE 9):
// Restricts input for the given textbox to the given inputFilter function.
function setInputFilter(textbox, inputFilter, errMsg) {
["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].forEach(function(event) {
textbox.addEventListener(event, function(e) {
if (inputFilter(this.value)) {
// Accepted value
if (["keydown","mousedown","focusout"].indexOf(e.type) >= 0){
this.classList.remove("input-error");
this.setCustomValidity("");
}
this.oldValue = this.value;
this.oldSelectionStart = this.selectionStart;
this.oldSelectionEnd = this.selectionEnd;
} else if (this.hasOwnProperty("oldValue")) {
// Rejected value - restore the previous one
this.classList.add("input-error");
this.setCustomValidity(errMsg);
this.reportValidity();
this.value = this.oldValue;
this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
} else {
// Rejected value - nothing to restore
this.value = "";
}
});
});
}
You can now use the setInputFilter
function to install an input filter:
setInputFilter(document.getElementById("myTextBox"), function(value) {
return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
}, "Only digits and '.' are allowed");
Apply your preferred style to input-error class. Here's a suggestion:
.input-error{
outline: 1px solid red;
}
See the JSFiddle demo for more input filter examples. Also note that you still must do server side validation!
TypeScript
Here is a TypeScript version of this.
function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean, errMsg: string): void {
["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].forEach(function(event) {
textbox.addEventListener(event, function(this: (HTMLInputElement | HTMLTextAreaElement) & {oldValue: string; oldSelectionStart: number | null, oldSelectionEnd: number | null}) {
if (inputFilter(this.value)) {
this.oldValue = this.value;
this.oldSelectionStart = this.selectionStart;
this.oldSelectionEnd = this.selectionEnd;
} else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {
this.value = this.oldValue;
if (this.oldSelectionStart !== null &&
this.oldSelectionEnd !== null) {
this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
}
} else {
this.value = "";
}
});
});
}
jQuery
There is also a jQuery version of this. See this answer.
HTML 5
HTML 5 has a native solution with <input type="number">
(see the specification), but note that browser support varies:
- Most browsers will only validate the input when submitting the form, and not when typing.
- Most mobile browsers don't support the
step
,min
andmax
attributes. - Chrome (version 71.0.3578.98) still allows the user to enter the characters
e
andE
into the field. Also see this question. - Firefox (version 64.0) and Edge (EdgeHTML version 17.17134) still allow the user to enter any text into the field.
Try it yourself on w3schools.com.
-
4Although this would be a good choice, this still allows to enter characters like /, multiple dots, other operators etc. Mar 12, 2013 at 19:36
-
7Still not supported by Firefox 21 (I don't even talk about IE9 or earlier version ...)– JBEMay 24, 2013 at 17:40
-
12The type="number" does not actually prevent entering invalid text into the field; appears that you can even cut and paste garbage data into the field, even in chrome. Jun 13, 2014 at 11:15
-
3jQuery variant allows other symbols on keyboard layouts on which there are other symbols on number row, for example AZERTY keyboard or lithuanian keyboard.– BomberltFeb 19, 2015 at 11:47
-
6The only thing I would add to this is to change the Ctrl+A line to include MacOSX users:
(e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true))
Mar 17, 2015 at 23:06
Use this DOM
<input type='text' onkeypress='validate(event)' />
And this script
function validate(evt) {
var theEvent = evt || window.event;
// Handle paste
if (theEvent.type === 'paste') {
key = event.clipboardData.getData('text/plain');
} else {
// Handle key press
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode(key);
}
var regex = /[0-9]|\./;
if( !regex.test(key) ) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
}
}
-
12german-settings on an eeepc 900. some key's for good usabiliy do not work: - backspace (keyCode: 8) - navigation key left and right (keyCode: 37, 38) copy and paste is also possible... Sep 10, 2009 at 18:24
-
11Most people do care, having a script error show up reflects poorly on your site. Apr 26, 2010 at 21:37
-
14few problems with this code. You can enter . more than one time, second it does not allow delete key, any solution? May 16, 2011 at 11:09
-
4I cared about backspace, delete and arrows not working. If you remove "theEvent.keycode ||", and add: "if( /[ -~]/ && !regex.test(key) ) {" then it does work better (for ASCII/UTF anyway). But then it won't reject chinese characters! :) Jun 3, 2011 at 7:44
-
4
Here is a simple one which allows for exactly one decimal, but no more:
<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" />
As someone commented below, the solution above does not handle leading zeros. If your particular use case requires that these are not allowed you can add to the pattern above like so:
<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');" />
That will allow 0.123
or .123
but not 0123
or 00.123
.
-
28Handles: copy+paste, drag 'n drop, only allows 1 decimal, tab, delete, backspace - use this one Jan 16, 2018 at 3:36
-
1Although it does do everything that @Mathemats said, It doesn't handle copy+paste with multiple decimals. All of the decimals of the pasted text get added. Dec 18, 2020 at 9:45
-
2@Mr.Simmons - good catch and thanks for pointing that out. I made a small adjustment that should address that scenario. Dec 18, 2020 at 13:29
-
1This is the best solution. I upvoted it years ago, but every time I've searched for a solution to this problem, I know that this answer is out there somewhere and I come back to it every time. I don't know what sort of magic OP is channeling, but even if I remove the event via inspector, the rule still applies to the input. Jun 9, 2021 at 17:15
-
1@Hyetigran - I didn't really intend for this to handle leading zeros but I can definitely see where that would be useful. I've added a modified version to my answer to deal with that. Thanks! Apr 7 at 21:08
I've searched long and hard for a good answer to this, and we desperately need <input type="number"
, but short of that, these 2 are the most concise ways I could come up with:
<input type="text"
onkeyup="this.value=this.value.replace(/[^\d]/,'')">
If you dislike the non-accepted character showing for a split-second before being erased, the method below is my solution. Note the numerous additional conditions, this is to avoid disabling all sorts of navigation and hotkeys. If anyone knows how to compactify this, let us know!
<input type="text"
onkeydown="return ( event.ctrlKey || event.altKey
|| (47<event.keyCode && event.keyCode<58 && event.shiftKey==false)
|| (95<event.keyCode && event.keyCode<106)
|| (event.keyCode==8) || (event.keyCode==9)
|| (event.keyCode>34 && event.keyCode<40)
|| (event.keyCode==46) )">
-
5input type="number" is coming in HTML 5 - and you could use JavaScript as a fall-back polyfill... stevefenton.co.uk/Content/Blog/Date/201105/Blog/…– FentonMay 23, 2011 at 23:06
-
5Good method but can be broken by pressing and holding a non-acceptable key Nov 16, 2011 at 16:24
-
8
-
12@boecko thanks for this, but note that it should be
/[^\d]+/
instead. Good solution though. Also @user235859 Jun 11, 2012 at 21:49 -
11
Most answers here all have the weakness of using key- events.
Many of the answers would limit your ability to do text selection with keyboard macros, copy+paste and more unwanted behavior, others seem to depend on specific jQuery plugins, which is killing flies with machineguns.
This simple solution seems to work best for me cross platform, regardless of input mechanism (keystroke, copy+paste, rightclick copy+paste, speech-to-text etc.). All text selection keyboard macros would still work, and it would even limit ones ability to set a non-numeric value by script.
function forceNumeric(){
var $input = $(this);
$input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);
-
jQuery 1.7+ needed. This is a more complete answer since it takes in account inputs via "copy". And it is also simpler! Jun 29, 2015 at 15:30
-
An alternative regex:
replace(/[^\d]+/g,'')
Replace all non-digits with empty string. The "i" (case insensitive) modifier is not needed. Jun 29, 2015 at 16:20 -
This should be on top, since "onkey" event handlers in a tag should not be propagated any more...– gpinkasOct 13, 2015 at 12:12
-
This one is definitely the best answer here but it doesn't allow digits with decimal numbers. Any idea how that could work?– AtiragSep 4, 2016 at 13:05
-
8
HTML5 has <input type=number>
, which sounds right for you. Currently, only Opera supports it natively, but there is a project that has a JavaScript implementation.
-
Here's a document defining which browsers support this attribute: caniuse.com/input-number. As of the writing of this, Chrome and Safari both fully support this type field. IE 10 has partial support, and Firefox has no support. Jul 25, 2013 at 14:05
-
-
-
14First problem is
type=number
is allowing thee
char because it considere+10
as number. Second problem is that you can not limit the maximum number of chars in the input. Oct 26, 2017 at 15:30 -
Another problem is that if the type is number then I can't get the benefits of setting the type to, for example: "tel". Feb 15, 2020 at 17:07
And one more example, which works great for me:
function validateNumber(event) {
var key = window.event ? event.keyCode : event.which;
if (event.keyCode === 8 || event.keyCode === 46) {
return true;
} else if ( key < 48 || key > 57 ) {
return false;
} else {
return true;
}
};
Also attach to keypress event
$(document).ready(function(){
$('[id^=edit]').keypress(validateNumber);
});
And HTML:
<input type="input" id="edit1" value="0" size="5" maxlength="5" />
-
-
-
3this doesn't work on Firefox when the event.keyCode is always returned 0. I fixed with new code: function validateNumber(event) { var key = event.which || event.charCode || event.keyCode || 0; if (key == 8 || key == 46 || key == 37 || key == 39) { return true; } else if ( key < 48 || key > 57 ) { return false; } return true; }; Nov 24, 2015 at 22:41
-
1As @Jessica said, you cam add apostrophe and even percentage sign. Dec 13, 2016 at 20:35
-
1
HTML5 supports regexes, so you could use this:
<input id="numbersOnly" pattern="[0-9.]+" type="text">
Warning: Some browsers don't support this yet.
-
8
-
1True. You should make this an answer. Ooops, @Ms2ger already has. Dec 1, 2011 at 15:59
-
The <input type=number> adds arrows for increasing and decreasing in certain browsers so this seems like a good solution when we want to avoid the spinner– AyradMay 7, 2013 at 17:06
-
57
-
I opted to use a combination of the two answers mentioned here i.e.
<input type="number" />
and
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode
return !(charCode > 31 && (charCode < 48 || charCode > 57));
}
<input type="text" onkeypress="return isNumberKey(event);">
-
Excellent answer... +1. You can also reduce the if statement to:
return !(charCode > 31 && (charCode < 48 || charCode > 57));
– schadeckApr 2, 2013 at 21:12 -
7How about deleting though? You want numbers but you probably want people to be able to correct them without refreshing the page... Feb 3, 2016 at 1:27
JavaScript
function validateNumber(evt) {
var e = evt || window.event;
var key = e.keyCode || e.which;
if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
// numbers
key >= 48 && key <= 57 ||
// Numeric keypad
key >= 96 && key <= 105 ||
// Backspace and Tab and Enter
key == 8 || key == 9 || key == 13 ||
// Home and End
key == 35 || key == 36 ||
// left and right arrows
key == 37 || key == 39 ||
// Del and Ins
key == 46 || key == 45) {
// input is VALID
}
else {
// input is INVALID
e.returnValue = false;
if (e.preventDefault) e.preventDefault();
}
}
additional you could add comma, period and minus (,.-)
// comma, period and minus, . on keypad
key == 190 || key == 188 || key == 109 || key == 110 ||
HTML
<input type="text" onkeydown="validateNumber(event);"/ >
-
Does not function correctly on keyboards where one has to use the shift key to enter a number (e.g. European AZERTY keyboard). May 17, 2013 at 7:43
-
thanks man, you really understand a question! Nice example and off course handling . or , (which most people do want if they work with numbers) Jan 12, 2015 at 9:15
-
This is the only one that works that prevent pasting non numeric values. Jan 11, 2016 at 15:18
-
2 solutions:
Use a form validator (for example with jQuery validation plugin)
Do a check during the onblur (i.e. when the user leaves the field) event of the input field, with the regular expression:
<script type="text/javascript">
function testField(field) {
var regExpr = new RegExp("^\d*\.?\d*$");
if (!regExpr.test(field.value)) {
// Case of error
field.value = "";
}
}
</script>
<input type="text" ... onblur="testField(this);"/>
-
Interestingly, I had to give the regex is "^\\d\\.?\\d*$", but that might be because the page is run through an XSLT transform. Apr 22, 2010 at 15:04
-
I think the regular expression is incorrect. I used this line:
var regExpr = /^\d+(\.\d*)?$/;
– costaJan 10, 2017 at 23:07 -
@costa not sure, if the user wants to input
.123
(instead of0.123
) for example? Jan 16, 2017 at 8:20 -
@romaintaz. You are right, but then you'd have to change the regular expression to make sure that in case there is no digit in front of the dot there are digits after the dot. Something like this:
var regExpr = /^\d+(\.\d*)?$|^\.\d+$/;
.– costaJan 16, 2017 at 19:09
// In a JavaScript function (can use HTML or PHP).
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
In your form input:
<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>
With input max. (These above allows for a 12-digit number)
-
1Don't do that ! This blocks everything, numpad, arrow keys, Delete key, shortcuts (CTRL + A, CTRL + R for example), even the TAB key it's REALY anoying !– KorriFeb 22, 2013 at 21:56
-
@Korri I dont follow, what seems to be the problme? It did work fine in my case. Mar 28, 2013 at 12:21
-
first line must changed to :
var charCode = (evt.which) ? evt.which : evt.keyCode;
Jul 17, 2014 at 22:35
A safer approach is checking the value of the input, instead of hijacking keypresses and trying to filter keyCodes.
This way the user is free to use keyboard arrows, modifier keys, backspace, delete, use non standard keyboars, use mouse to paste, use drag and drop text, even use accessibility inputs.
The below script allows positive and negative numbers
1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed
var input = document.getElementById('number');
input.onkeyup = input.onchange = enforceFloat;
//enforce that only a float can be inputed
function enforceFloat() {
var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
if (!valid.test(this.value)) {
var n = this.value.match(number);
this.value = n ? n[0] : '';
}
}
<input id="number" value="-3.1415" placeholder="Type a number" autofocus>
EDIT: I removed my old answer because I think it is antiquated now.
You can use pattern for this:
<input id="numbers" pattern="[0-9.]+" type="number">
Here you can see the complete mobile website interface tips.
Please find below mentioned solution. In this user can be able to enter only numeric
value, Also user can not be able to copy
, paste
, drag
and drop
in input.
Allowed Characters
0,1,2,3,4,5,6,7,8,9
Not allowed Characters and Characters through events
- Alphabetic value
- Special characters
- Copy
- Paste
- Drag
- Drop
$(document).ready(function() {
$('#number').bind("cut copy paste drag drop", function(e) {
e.preventDefault();
});
});
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">
Let me know if it not works.
One more example where you can add only numbers in the input field, can not letters
<input type="text" class="form-control" id="phone" name="phone" placeholder="PHONE" spellcheck="false" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
If you want to suggest to the device (maybe a mobile phone) between alpha or numeric you can use <input type="number">
.
A short and sweet implementation using jQuery and replace() instead of looking at event.keyCode or event.which:
$('input.numeric').live('keyup', function(e) {
$(this).val($(this).val().replace(/[^0-9]/g, ''));
});
Only small side effect that the typed letter appears momentarily and CTRL/CMD + A seems to behave a bit strange.
JavaScript code:
function validate(evt)
{
if(evt.keyCode!=8)
{
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode(key);
var regex = /[0-9]|\./;
if (!regex.test(key))
{
theEvent.returnValue = false;
if (theEvent.preventDefault)
theEvent.preventDefault();
}
}
}
HTML code:
<input type='text' name='price' value='0' onkeypress='validate(event)'/>
works perfectly because the backspace keycode is 8 and a regex expression doesn't let it, so it's an easy way to bypass the bug :)
just use type="number" now this attribute supporting in most of the browsers
<input type="number" maxlength="3" ng-bind="first">
A easy way to resolve this problem is implementing a jQuery function to validate with regex the charaters typed in the textbox for example:
Your html code:
<input class="integerInput" type="text">
And the js function using jQuery
$(function() {
$('.integerInput').on('input', function() {
this.value = this.value
.replace(/[^\d]/g, '');// numbers and decimals only
});
});
$(function() {
$('.integerInput').on('input', function() {
this.value = this.value
.replace(/[^\d]/g, '');// numbers and decimals only
});
});
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous">
</script>
<input type="text" class="integerInput"/>
input type="number"
is an HTML5 attribute.
In the other case this will help you:
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>
-
first line must changed to :
var charCode = (evt.which) ? evt.which : evt.keyCode;
Jul 17, 2014 at 22:35
Just an other variant with jQuery using
$(".numeric").keypress(function() {
return (/\d/.test(String.fromCharCode(event.which) ))
});
I saw some great answers however I like them as small and as simple as possible, so maybe someone will benefit from it. I would use javascript Number()
and isNaN
functionality like this:
if(isNaN(Number(str))) {
// ... Exception it is NOT a number
} else {
// ... Do something you have a number
}
Hope this helps.
-
1
-
This is not an answer to the question, OP asked to only allow text on a input, not verify afterwards. Jan 20, 2020 at 15:03
-
Yes, that is truth! But there is already an accepted answer which I think is good, but I thought this might help somebody, plus it's nice and clean.– SichaJan 24, 2020 at 9:25
-
1Keep in mind that
Number("")
produces0
. If you wantNaN
in case of empty inputs, use eitherparseFloat(str)
or add a check for empty string.– connexoApr 27, 2021 at 20:10
You can also compare input value (which is treated as string by default) to itself forced as numeric, like:
if(event.target.value == event.target.value * 1) {
// returns true if input value is numeric string
}
However, you need to bind that to event like keyup etc.
<input name="amount" type="text" value="Only number in here"/>
<script>
$('input[name=amount]').keyup(function(){
$(this).val($(this).val().replace(/[^\d]/,''));
});
</script>
My solution for a better user experience:
HTML
<input type="tel">
jQuery
$('[type=tel]').on('change', function(e) {
$(e.target).val($(e.target).val().replace(/[^\d\.]/g, ''))
})
$('[type=tel]').on('keypress', function(e) {
keys = ['0','1','2','3','4','5','6','7','8','9','.']
return keys.indexOf(event.key) > -1
})
Details:
First of all, input types:
number
shows up/down arrows shrinking the actual input space, I find them ugly and are only useful if the number represents a quantity (things like phones, area codes, IDs... don't need them)
tel
provides similar browser validations of number without arrows
Using [number / tel] also helps showing numeric keyboard on mobile devices.
For the JS validation I ended up needing 2 functions, one for the normal user input (keypress) and the other for a copy+paste fix (change), other combinations would give me a terrible user experience.
I use the more reliable KeyboardEvent.key instead of the now deprecated KeyboardEvent.charCode
And depending of your browser support you can consider using Array.prototype.includes() instead of the poorly named Array.prototype.indexOf() (for true / false results)
Use this DOM:
<input type = "text" onkeydown = "validate(event)"/>
And this script:
validate = function(evt)
{
if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
{
evt.returnValue = false;
if(evt.preventDefault){evt.preventDefault();}
}
}
...OR this script, without indexOf, using two for
's...
validate = function(evt)
{
var CharValidate = new Array("08", "046", "039", "948", "235");
var number_pressed = false;
for (i = 0; i < 5; i++)
{
for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
{
if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
{
number_pressed = true;
}
}
}
if (number_pressed == false)
{
evt.returnValue = false;
if(evt.preventDefault){evt.preventDefault();}
}
}
I used the onkeydown attribute instead of onkeypress, because the onkeydown attribute is checked before onkeypress attribute. The problem would be in the Google Chrome browser.
With the attribute "onkeypress", TAB would be uncontrollable with "preventDefault" on google chrome, however, with the attribute "onkeydown", TAB becomes controllable!
ASCII Code for TAB => 9
The first script have less code than the second, however, the array of ASCII characters must have all the keys.
The second script is much bigger than the first, but the array does not need all keys. The first digit in each position of the array is the number of times each position will be read. For each reading, will be incremented 1 to the next one. For example:
NCount = 0
48 + NCount = 48
NCount + +
48 + NCount = 49
NCount + +
...
48 + NCount = 57
In the case of numerical keys are only 10 (0 - 9), but if they were 1 million it would not make sense to create an array with all these keys.
ASCII codes:
- 8 ==> (Backspace);
- 46 => (Delete);
- 37 => (left arrow);
- 39 => (right arrow);
- 48 - 57 => (numbers);
- 36 => (home);
- 35 => (end);
This is an improved function:
function validateNumber(evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
theEvent.returnValue = false;
if (theEvent.preventDefault) theEvent.preventDefault();
}
}
Here is my simple solution for React users only, I couldn't find a better solution and made my own. 3 steps.
First, create a state.
const [tagInputVal, setTagInputVal] = useState("");
Then, use the state as input value (value={tagInputVal}
) and pass the event to the onChange
handler.
<input id="tag-input" type="text" placeholder="Add a tag" value={tagInputVal} onChange={(e) => onChangeTagInput(e)}></input>
Then, set the value of the event inside onChange
handler.
function onChangeTagInput(e) {
setTagInputVal(e.target.value.replace(/[^\d.]/ig, ""));
}
-
This or any javascript solution has this advantage over
<input type="number">
that sometimes the input value is not a number in terms of semantics (It can't be incremented), rather it's a numerical code like one-time passwords.– Ehsan88Sep 12, 2021 at 10:07
<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'></input>