Formatting a html input box to numeric input only - Correctly formating the minus character

Question

I'm trying to format a html text input box so that it only accepts numeric values (using javascript). This means the input can only be a digit, a minus or a dot/comma (a comma gets replaced with a dot anyway).

The thing is, a minus must be prevented if it is not the first character of the string. Ex: "-30" is a valid input, but "80----20" is not. Does anyone has any idea on how to solve this?

var div = document.getElementById("div");

function inputHandle(event, object){

 var input = document.getElementById("value");
 var comma = false;

 for (i=0; i<input.value.length; i++) {
     var array = input.value;

     if (input.value[i] == ".") {
      comma = true;
     }
    }

 if ((event.keyCode == 13) && (Number(input.value) < Number.MAX_SAFE_INTEGER)) {
  object.innerHTML = Number(input.value);
 }

    if ((event.charCode == 44) && (comma == false)) {
     input.value = input.value + ".";
     event.preventDefault();
    }

    if (!((/^-?\d*\.?\d*$/.test(event.key) == true)
    || (((event.charCode == 118) || (event.charCode == 99) || (event.charCode == 97)) && (event.ctrlKey))
    || (event.keyCode == 8)
    || (event.keyCode == 46)
    || (event.keyCode >= 35 && event.keyCode <= 40)
    )) {
        event.preventDefault();
    }

    if ((event.charCode == 46) && (comma == true)) {
        event.preventDefault();
    }
  
}

<div id="div"></div>

<input type='text' onkeypress='inputHandle(event, div)' accept-charset='ISO-8859-1' id='value' name='coefficientvalue' placeholder='Enter a value...'>

Don't believe, just test it: https://jsfiddle.net/oy7vfofx/ (you will have to adjust the `step` attribute to match the allowed/accepted precision) — Andreas, Apr 14 '18 at 15:29

score 3 · Accepted Answer · answered Apr 14 '18 at 15:16

3

If you really need a input[type="text"] I think a regular expression is the best you could use. The following Regex should work:

/^-?\d*\.?\d*$/

You could check the input value on each input-event with this regex like the following:

/^-?\d*\.?\d*$/.test(input.value)

Otherwise you should use type="number" for your input element, like Andreas commented.

After testing the input you should use parseFloat to normalize the input, since the Regex would allow inputs like ".2" or "2.".

answered Apr 14 '18 at 15:16

Teemoh

332
2
11

Thanks for answering. Yes, gerex is much more appropriate (I'm not experienced at all in this, that's why I didn't used it), but unfortunately this doesn't fix my issue. First of all, this regex code is not enough, as besides all digits, the minus and the dot character I also need to include all arrows, the delete and the backspace keys. If you could help me figure the regex syntax of this out I would really appreciate it. – Gark Garcia Apr 14 '18 at 16:26
Also, as I'm trying to prevent the user from typing unwanted characters into the input box instead of validating the input, I actually need to do `/^-?\d*\.?\d*$/.test(event.key)` and prevent the key event if it returns false. Besides that, I can still place multiple minus characters anywhere I want, so I don't see the point of this... Thanks for the help anyway! I've updated the code snippet replacing all that weird `charcCode <= 35` stuff whith regex notation (at least everything I was able to). – Gark Garcia Apr 14 '18 at 16:27
Could you check my CodePen and check if this is the wanted behaviour? https://codepen.io/anon/pen/KojmBx Im using the "input"-event to validate the complete input string. – Teemoh Apr 14 '18 at 17:17
1

Pretty elegant solution! – Gark Garcia Apr 14 '18 at 18:47

Formatting a html input box to numeric input only - Correctly formating the minus character

1 Answers1