Javascript - only allow numbers in input field & a character counter

Question

I have an input field. I want it so that only numbers can be used in the input field.

Below the input field I also want a counter that shows the number of characters currently inside the input field.

HTML:

<input type="text" id="test" onkeypress="return isNumber(event)" />
<p id='demo'></p>

Javascript:

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    let inputValue = document.getElementById('test').value;
    let inputLength = inputValue.length;
    document.getElementById("demo").innerHTML = inputLength;
    return true;
    }

jsfiddle: http://jsfiddle.net/s831nwej/

It almost works. The problem is that the character counter below the input box is always 1 character less than the total number of characters in the input field. I think there is some quark about the keypress event that I am missing.

<input type="number" ...

adeneo
– adeneo

2017-07-09 05:38:11 +00:00
Commented Jul 9, 2017 at 5:38 — adeneo
– adeneo, Commented Jul 9, 2017 at 5:38

Pranav C Balan · Accepted Answer · 2017-07-09 06:08:16Z

2

Calculate the count within keyup event or html5 input event handler.

HTML :

 <input type="text" id="test" 
     oninput="calculate(this)"
     onkeypress="return isNumber(event)"/>

<p id='demo'></p>

JavaScript :

// function for preventing certain characters
function isNumber(evt) {
  evt = (evt) ? evt : window.event;
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode > 31 && (charCode < 48 || charCode > 57)) {
    return false;
  }
  return true;
}

// function for calculating the length where element
// reference passed as an argument
function calculate(ele) {
  let inputLength = ele.value.length;
  document.getElementById("demo").innerHTML = inputLength;
}

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

function calculate(ele) {
  let inputLength = ele.value.length;
  document.getElementById("demo").innerHTML = inputLength;

}

<input type="text" id="test" oninput="calculate(this)" onkeypress="return isNumber(event)" />
<p id='demo'></p>

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

function calculate(ele) {
  let inputLength = ele.value.length;
  document.getElementById("demo").innerHTML = inputLength;

}

<input type="text" id="test" onkeyup="calculate(this)" onkeypress="return isNumber(event)" />
<p id='demo'></p>

There is a better way using a number input type in html5 which only accept the number input.

HTML :

 <input type="number" id="test" 
      oninput="calculate(this)"/>

<p id='demo'></p>

JavaScript :

// function for calculating the length where element
// reference passed as an argument
function calculate(ele) {
  let inputLength = ele.value.length;
  document.getElementById("demo").innerHTML = inputLength;
}

function calculate(ele) {
  let inputLength = ele.value.length;
  document.getElementById("demo").innerHTML = inputLength;
}

<input type="number" id="test" oninput="calculate(this)" />

<p id='demo'></p>

edited Jul 9, 2017 at 6:08

answered Jul 9, 2017 at 5:39

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

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

3 Comments

Nodir Rashidov Over a year ago

depending on key being pressed is a bad idea I think. oninput or onchange are better options

Nodir Rashidov Over a year ago

you can copy and paste nonnumbers into your fields

user663031 Over a year ago

@JapanGuy onchange won't trigger until you leave the field.

sagar · Accepted Answer · 2017-07-09 06:52:12Z

I would like to answer why your keypress creates this unexpected behavior. First of all, it is not related to javascript, it's the feature of your Operating System which interprets your keystrokes and displays them on screen. So, there is nothing you can do with javascript. So, How it works? When you press a key

WM_KEYDOWN and WM_SYSKEYDOWN

messages are sent(condition: the key is not hold) and

key-state flag is set to zero.

But if condition is you press and hold the key, the flag:

key-state flag set to 1.

So from there until

WM_KEYUP or WM_SYSKEYUP

message is not set or key-state flag is set to 1 the data is not stored in input box value. However, it display them inside input box. That's why your keypress do not count the current input value. if you would use

keyup event

then it would be able to count the current input value also because your OS has done its

WM_KEYUP

work. for more details how your keyboard works you may refer to this link: About Keyboard

and for your next question "number input" you may use regular expression check using and do something like this:

var regEx = /^\d+$/;
//then do some check.
if(!regEx.test(document.getElementById("test"))) return false;

or you may inside your html input tag

<input type="number" .. >
<!-- else you may -->
<input type="text" ... pattern = "\d">;

Notic: you also need to check for null values.

Geeky · Accepted Answer · 2017-07-09 05:40:40Z

-1

Firstly if you want inputs to be only numbers use type="number" instead of type "text" and the count is always less than one because your event handling for checking the value should be on onKeyUp instead of onKeyPress

check this snippet

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    let inputValue = document.getElementById('test').value;
		let inputLength = inputValue.length;
		document.getElementById("demo").innerHTML = inputLength;
    return true;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="test" onkeyup="return isNumber(event)" />
<p id='demo'></p>

answered Jul 9, 2017 at 5:40

Geeky

7,5142 gold badges28 silver badges52 bronze badges

1 Comment

Nodir Rashidov Over a year ago

copy any text paste it with right click. doesnt work

Collectives™ on Stack Overflow

Javascript - only allow numbers in input field & a character counter

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related