Help to improve this javascript input mask

Question

Features

Only numbers
A unique dot (.)

But...i need improve to allow user digits only two numbers after the dot

Valid examples:

121213
123450.10
12345678910111213.39

The current code (adapted from this, not need to keep exactly the same code...) :

<HTML>
   <HEAD>
   <SCRIPT language=Javascript>
      <!--
      function isNumberKey(evt,obj){

         var containsDot = obj.value.indexOf(".");

         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 31 && (charCode < 48 || charCode > 57)){
              if(charCode == 46 && containsDot < 0){
                return true;
              }
                return false;
         }
         return true;
      }
      //-->
   </SCRIPT>
   </HEAD>
   <BODY>
      <INPUT id="txtChar" onkeypress="return isNumberKey(event,this)" type="text" name="txtChar">
   </BODY>
</HTML>

score 3 · Answer 1 · answered Feb 25 '11 at 17:41

3

Just use a regular expression. E.g.

function isNumberKey(evt, obj){
    return obj.value.match(/[0-9]*(\.[0-9]{0,2})?/)
}

answered Feb 25 '11 at 17:41

dtech

13,741
11
48
73

I think that will match `99.` and `99.3` , just FYI. – rlb.usa Feb 25 '11 at 17:44
@rlb.usa That is intentional, otherwise when you try to type a dot your character will not be accepted since false is returned. @celsown It might need a little tweaking, just look into JavaScript regular expressions. – dtech Feb 25 '11 at 17:50
His function determines if the next key pressed should be accepted. I don't think that key is in obj.value yet when this occurs, so your code is really saying that adding an extra character (any character) after e.g. 25.67 is ok, since it will evaluate to true. – johusman Feb 25 '11 at 18:04

Yuriy Nemtsov · Accepted Answer · 2011-02-27T08:15:35.573

1

I've posted a fully working version of this here: http://jsfiddle.net/georgecalm/NRtVs/2/

HTML:

<input id="txt" type="text" name="txtChar" />

JS:

var isStrValid = function(str) {
  return ((str.match(/[^\d^.]/) === null) 
       && (str.replace(/\d+\.?\d?\d?/, "") === ""));
};

var node = dojo.byId("txt");
dojo.connect(node, "onkeyup", function() {
    if (!isStrValid(node.value)) {
      node.value = node.value.substring(0, node.value.length-1);
    }
});

The first checks (of the isStrValid) makes sure you don't have anything but numbers and a dot. The second checks the pattern.

edited Feb 27 '11 at 08:15

answered Feb 25 '11 at 18:00

Yuriy Nemtsov

3,869
4
30
44

i tried "debugging" your code with alert and returns "false" with 111.1 – celsowm Feb 25 '11 at 18:13
@celsowm right. You asked to "allow only two numbers after the dot". So that's what the regex above expects. "111.1" has only one number after the dot. Do you want: at most two, but min one number after the dot? – Yuriy Nemtsov Feb 25 '11 at 18:18
but actually using your code inside "keypress", the user cannot digits 111.11 – celsowm Feb 25 '11 at 19:24
@celsowm I think that depends on how you implement it. If this is a validator, then it should complain on all bad cases. (Take a look at the updated answer). – Yuriy Nemtsov Feb 25 '11 at 20:02
red and black is cool too ! But i need a 'mask', preventing the user from typing the wrong things – celsowm Feb 26 '11 at 22:38

score 0 · Answer 3 · answered Feb 25 '11 at 17:44

0

If it has a dot, but does not have two digits after it, return false.

if(containsDot && obj.value.split(".")[1].length != 2){
  return false; 
}

answered Feb 25 '11 at 17:44

Peter Olson

139,199
49
202
242

score 0 · Answer 4 · answered Feb 25 '11 at 17:46

0

You can start off the function with

if (obj.value.match(/\.[0-9][0-9]/)) {
    // Already has two decimals
    return false;
}

answered Feb 25 '11 at 17:46

johusman

3,472
1
17
11

Ah, ok. Yeah, I guess there are some characters that you have to always allow, returning true for them before even doing the above check. – johusman Feb 25 '11 at 17:51

Help to improve this javascript input mask

4 Answers4

Linked