javascript input allowing only numbers

Question

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 do not have access to the html, and have only javascript

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

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

p.s. found another bug with this component:
when you copy-paste(ctrl-v or right click-paste) it does not work
can someone know how to resolve it

jAndy · Accepted Answer · 2013-01-29 14:40:23Z

4

If you're cool in using HTML5 and only target modern browsers, the new attributes required and pattern are here for you. Example:

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

and you can address the state via CSS like

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

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

If used within a <form> tag, a user won't be able to submit in invalid state.

I just read that you don't have access to the markup, so apologizes. I'll just leave it as informational answer.

answered Jan 29, 2013 at 14:40

jAndy

237k57 gold badges313 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vincent Over a year ago

This does not prevent input, but only blocks the form submit.

Josaph · Accepted Answer · 2014-06-18 01:01:22Z

In <<your code>> add the name of the function to handle it, isNumberKey in this case; and also you need to add evt.preventDefault(); before return false;

This function below only accepts codes corresponding to digits from 0 to 9 and ignores dots ("."), 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;
}

Configure 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 styling from jAndy's answer: http://jsfiddle.net/pL9Zk/

titanofold · Accepted Answer · 2015-03-03 16:37:10Z

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

The HTML5 example by jAndy is probably the best answer for browsers that support it. The JavaScript answer by Josaph was good as well in that it inspired my answer to solve the questioner's addendum and my problem.

The following throws away input that matches the regex (not a digit, replace with an empty string), and is invoked anytime there's input, even from a 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 JavaScript guy, I'm not sure if this is a good way to solve the problem, or if there are performance issues to consider. However, it works for me.

Waji · Accepted Answer · 2013-01-29 14:42:19Z

0

It's a mistake?

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

answered Jan 29, 2013 at 14:42

Waji

713 bronze badges

Comments

Abhijeet Pawar · Accepted Answer · 2013-01-29 17:56:58Z

0

event is unknown inside function. So mention the event object to function:

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

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

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

edited Jan 29, 2013 at 17:56

answered Jan 29, 2013 at 14:40

Abhijeet Pawar

6901 gold badge6 silver badges19 bronze badges

4 Comments

MaksiK Over a year ago

you're right, but it's not rly problem, you're code don't works

MaksiK Over a year ago

do not look for syntax problems

MaksiK Over a year ago

when add <<onkeypress="return isNumberKey(event)">> in html, when the function returns false, symbol does not added to the input, but when i use addEventListener, function returns false, but symbol added

MaksiK Over a year ago

need advice html+javascript Jedi

wrecklez · Accepted Answer · 2014-06-18 01:20:59Z

0

Try this code bro. i hope it will help you a lot i use jQUERY.

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

answered Jun 18, 2014 at 1:20

wrecklez

3472 silver badges4 bronze badges

Comments

Aurelio · Accepted Answer · 2014-11-19 11:56:08Z

If you can't go with HTML5 <input type="number"> then I would regex the input value allowing only numbers. I modified a script I wrote to accomplish a similar task. It allows pasting and strips 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);

Anyway, you can view the original script with tests here and a demo of the above code here.

Collectives™ on Stack Overflow

javascript input allowing only numbers

7 Answers 7

1 Comment

Comments

Comments

Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related