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.

Answer 1

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.

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

Answer 3

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>