Function works with text input but not numerical input

Question

I have a JavaScript function that clears a text input if an alphabet character is typed into it.

input = document.getElementById('inf');
input.onkeyup = function() {
  value = input.value;
  truth = isNaN(value);
  if (truth) {
    input.value = '';
  }

};

input {
  border: 2px solid black;
  margin-right: 10px;
}

<input type='text' id='inf' />Numbers Only
<br />Type a number in, and it stays. Put a letter in, and the input clears itself

The problem is, this does not work when the input type is set to number, as evidenced by the below sample.

input=document.getElementById('inf');
input.onkeyup=function(){
  value=input.value;
  truth=isNaN(value);
  if(truth){
    input.value='';
  }
  
};

input{
  border:2px solid black;
  }

<input type='number' id='inf'/>
<br />
As you can see, it doesnt work anymore.

My question is twofold:

1) Why does it work with a text input but not a number input?

2)Is there an easy fix? I need it as a number input, so that must stay the same.

Please Javascript answers only. No jQuery.

The htlm5 number input (as the name suggests) is meant to only accept numeric values. It will ignore any non number character, without altering the value entered so far. If you want the input to clear when a letter is entered (assuming that you have a very good reason to want that behavior), you have to start from a text input and listen for a key events. http://stackoverflow.com/questions/4416505/how-to-take-keyboard-input-in-javascript (as you did) — widged, Sep 06 '15 at 23:53

Rick Hitchcock · Accepted Answer · 2015-09-07T00:01:33.220

1

Number inputs don't allow non-numeric data, so this will always be false:

truth= isNaN(value);

Instead, you could check if the key pressed is a digit or a decimal:

input=document.getElementById('inf');
input.onkeyup=function(e) {
  if(!/[\d\.]/.test(String.fromCharCode(e.which))) {
    input.value='';
  }
};

<input type='number' id='inf'/>

edited Sep 07 '15 at 00:01

answered Sep 06 '15 at 23:51

Rick Hitchcock

35,202
5
48
79

score 0 · Answer 2 · answered Sep 06 '15 at 23:53

0

When input type is number, it returns null if there is a non-number character in the text.
So

"abc123" = ""  
"123abc" = ""  
"123" = "123"  


isNaN(null) is false.

answered Sep 06 '15 at 23:53

James McDowell

2,668
1
14
27

score 0 · Answer 3 · answered Sep 06 '15 at 23:53

0

You can just check for blank along with your isNaN check

var truth = isNaN(value) || value==='';

Since the input type=number will convert any non numeric to blank

answered Sep 06 '15 at 23:53

joyBlanks

6,419
1
22
47

Function works with text input but not numerical input

3 Answers3