Geek Answers Handbook

Javascript input allowing only numbers

I use this code and it works

<HTML> <HEAD> <SCRIPT language=Javascript> <!-- function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : event.keyCode; if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) return false; return true; } //--> </SCRIPT> </HEAD> <BODY> <INPUT id="txtChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar"> </BODY> </HTML>

but i don't have html access and i only have javascript

 document.getElementById("txtChar").addEventListener("keypress", <<your code>>, false);

What should be in place <<your code>> ?

ps found another error with this component:
when you copy-paste (ctrl-v or right-paste), this does not work
maybe someone knows how to solve it

+2
javascript
source share
7 answers

If you like to use HTML5 and focus only on modern browsers, the new attributes required and pattern here for you. Example:

 <input id="txtChar" type="number" required pattern="\d+"/>

and you can access the state through CSS, for example

 #txtChar:required:valid { border: 1px solid green; } #txtChar:required:invalid { border: 1px solid red; }

If used in the <form> , the user cannot send it to an invalid state.

I just read that you do not have access to the markup, so I apologize. I will just leave this as an informational answer.

+3
source share

In <<your code>> add the name of the function to process it, isNumberKey in this case; as well as add evt.preventDefault(); before return false;

This function below only accepts codes corresponding to numbers from 0 to 9, and ignores periods ("."), Hyphens ("-") and minus signs ("-").

 function isNumberKey(evt){ var charCode = (evt.which) ? evt.which : evt.keyCode; if (charCode == 46 || charCode > 31 && (charCode < 48 || charCode > 57)){ evt.preventDefault(); return false; } return true; }

Set the input field for HTML5 browsers:

 txtChar = document.getElementById("txtChar") txtChar.addEventListener("keypress", isNumberKey, false); //Attributes txtChar.type = "number"; txtChar.min = 0; txtChar.pattern = "\\d+"; txtChar.placeholder = "Only integer positive numbers"; txtChar.required = "required";

Working example including jAndy response style: http://jsfiddle.net/pL9Zk/

+1
source share

the event is unknown inside the function. Therefore, specify an event object for the function:

document.getElementById ("myElement"). addEventListener ("keypress", function ( event ) {return isNumberKey (event);}, false); Strike>

EDIT: The question has changed a bit, therefore, quoting the answer:
1. Change "myElement" to "txtChar"
2. include the event object as a parameter

 document.getElementById("txtChar").addEventListener("keypress", function(event){ return isNumberKey(event); }, false);
0
source share

This is mistake?

 document.getElementById(**"txtChar"**).addEventListener("keypress", function(){ return isNumberKey(event); }, false);
0
source share

Try this bro code. I hope this helps you use jquery a lot.

 <head> <script src="//code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <input id="txtChar" type="text" name="txtChar"> </body> <script> $("#txtChar").keypress(function(e) { var charCode = (e.which) ? e.which : event.keyCode; if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) return false; return true; }); </script>
0
source share

If you cannot go with HTML5 <input type="number"> , I would re-set the input value, allowing only numbers. I changed the script I wrote to perform a similar task. It allows you to paste and cut any non-integer character.

 var arrowKeys = [37, 38, 39, 40]; function stripChars( e ) { // Don't execute anything if the user is just moving the cursor around and // not really entering anything new. if(arrowKeys.indexOf(e.keyCode) !== -1){ return; } var elem = e.currentTarget, cursorPos = elem.selectionEnd; // strip any unwanted character and assign the value back elem.value = elem.value.replace(/\D/g,''); // this avoids the cursor shifting to the end of the input // when inserting an integer in the middle of an already existing number elem.selectionEnd = cursorPos; elem.focus(); } var elem = document.getElementById('elem'); elem.addEventListener('keyup', stripChars, false); elem.addEventListener('paste', stripChars, false);

In any case, you can view the source script with the tests here and a demonstration of the above code here .

0
source share

I know I'm a little late to the party.

An HTML5 jAndy example is probably the best answer for browsers that support it. Josaph's answer to JavaScript was good in that it inspired my answer to the solution to the add-on and my problem.

The next one discards the input that matches the regular expression (not a digit, replaced by an empty string), and is called anytime there, even from paste.

  function stripNonNumeric() { this.value = this.value.replace(/\D+/g, ''); } var txtChar = document.getElementById("txtChar"); if (txtChar.addEventListener) { txtChar.addEventListener("input", stripNonNumeric); } else if (txtChar.attachEvent) { txtChar.attachEvent("oninput", stripNonNumeric); }

I'm not a guy from JavaScript, I'm not sure if this is a good way to solve a problem or if there are performance issues. However, this works for me.

0
source share

More articles:


All Articles