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

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>