Javascript - testing for non-numeric text input

Question

I have a text input for a calculator that is already set up to only accept numbers, and I want to allow for both positive and negative integers, but when the input is used, I want to disallow + and - to be entered. Instead, I want to have those inputs cause operations to be performed.

display.keypress(function() {
  if (temp === 0 && $(this).val().isInteger()) {
    temp = $(this).val().toString();
  } else if ($(this).val().isSafeInteger()) {
    temp += $(this).val().toString();
  }
});

what exactly are you trying to do? Where is `temp` defined? `$(this).val()` returns a string, so you needn't call `toString()` on it. Where is `isInteger()` and `isSafeInteger()` defined? — Heretic Monkey, Feb 21 '17 at 20:11
temp was declared outside with a let. isInteger() and isSafeInteger() are native functions https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger It is a calculator so I want to have a function triggered when typical operation buttons are pressed, but at this point I am simply trying to have the operators not appear in the input. — MonkeyMaker, Feb 21 '17 at 20:28
But, as is shown in the examples on that page, it's a static method of `Number`, so it would be `Number.isInteger($(this).val())`. Are you sure you're not getting a TypeError on that call? — Heretic Monkey, Feb 21 '17 at 20:31
Well, also, `Number.isInteger()` doesn't work on strings... You'd have to do `Number.isInteger(parseInt($(this).val(), 10))`... — Heretic Monkey, Feb 21 '17 at 20:42
The link you provided had an aswer that was very easy to understand and easily modifiable to my needs. Thanks. — MonkeyMaker, Feb 21 '17 at 21:10

score 0 · Answer 1 · answered Feb 21 '17 at 20:10

This might be the answer:

const isInteger = text => /[+-]?\d+/.test(text)

const data = ['1', '-1', '0.2', '-0,2']
for (let num of data){
    console.log(`${num} ${isInteger(num)}`)
}

You can also try this:

const isNumber = text => /[+-]?\d+[,.]?\d*/.test(text)

const data = ['1', '-1', '0.2', '-0,2']
for (let num of data){
  console.log(`${num} ${isNumber(num)}`)
}

score 0 · Answer 2 · answered Feb 21 '17 at 20:43

I think this might be what you are asking for. I set a boolean to see if one of the operators were used, then I strip it out and finally sanitize the input; ready for a function to handle the operation.

var numberInput = document.getElementById('numberInput');
numberInput.addEventListener('input', function(){
  var add = false;
  var subtract = false;
  if(this.value.indexOf('+') >= 0) add = true;
  if(this.value.indexOf('-') >= 0) subtract = true;
  if(isNaN(this.value.slice(-1))) this.value = this.value.slice(0, -1);
  if(add) addOperation();
  if(subtract) subtractOperation();
});

function addOperation(){
  console.log('add!');
}

function subtractOperation(){
  console.log('subtract!');
}

<input type="text" id="numberInput"/>

Nelson Teixeira · Accepted Answer · 2017-02-21T21:02:08.163

In order to not allow the user to input anything but numbers, you have to substitute the input's onkeypress event with a function that returns true if the key is valid or false if it isn't. This function is called with a parameter event that has information about the key pressed, so you can read it and check what key was pressed. But to limit it to numbers and + and - signs it's not enough. You do want your user to be able to delete things inside with backspace and delete, use the arrows and home/end. So you have to consider this as well. So you have to check these keys also. But this explanation makes it seem more difficult than actually is. I made an example that makes things clearer:

function sumSubtractionFunction(oper) {
 console.log(oper);
}

document.getElementById('display').onkeypress = function(event) {
   // first we check if + or - were pressed and call the function in that case
   if (['+', '-'].indexOf(event.key) > -1) {
       sumSubtractionFunction(event.key);
       return false;
   };
   
   // then we check if the key is one that should be allowed
   return ([8, 35, 36, 37, 38, 39, 40, 46].indexOf(event.keyCode) > -1)
          || (Number.isInteger(Number(event.key)));
};

<input type="text" id="display"/>

Key codes:

8 -> backspace
35 -> home
36 -> end
37-40 -> arrows
46 -> delete

Javascript - testing for non-numeric text input

3 Answers3