Javascript - only allow numbers in input field and character count
I have an input field. I want to be able to use only numbers in the input field.
Below the input field, you also need a counter that shows the number of characters 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 count below the input field is always 1 character less than the total number of characters in the input field. I think there is some kind of quark about the event keypress
that I am missing.
source to share
Calculate counter in 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 to use the number input type in html5 which only accepts the input number .
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>
source to share
I would like to answer why your keypress is creating this unexpected behavior. First of all, this is not related to javascript, it is a feature of your operating system that interprets your keystrokes and displays them on the screen. So there is nothing you can do with javascript. So how does it work? When you press the key
WM_KEYDOWN and WM_SYSKEYDOWN
messages are sent (condition: the key is not held) and
the key state flag is set to zero.
But if you press and hold a key, the flag is:
key status flag set to 1.
So from there to
WM_KEYUP or WM_SYSKEYUP
is not set or the key state flag is set to 1, the data is not saved in the input field. However, it displays them inside the input field. Therefore, your click does not respect the current input value. if you use
keyup event
then it will be able to count the current value of the input also because your OS made its
WM_KEYUP
Job. for more details on how your keyboard works you can refer to this link: About the keyboard
and for your next question "number input" you can use regex validation and do something like this:
var regEx = /^\d+$/;
//then do some check.
if(!regEx.test(document.getElementById("test"))) return false;
or you can enter your html input tag
<input type="number" .. >
<!-- else you may -->
<input type="text" ... pattern = "\d">;
Notic: you also need to check for null values.
source to share
First, if you only want the inputs to be numbers, use type = "number" instead of type "text" and count is always less than one, because event handling to validate the value must be 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>
source to share