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>

dtech · Accepted Answer · 2011-02-25 17:41:52Z

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, 2011 at 17:41

dtech

14.1k11 gold badges52 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rlb.usa Over a year ago

I think that will match 99. and 99.3 , just FYI.

dtech Over a year ago

@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.

johusman Over a year ago

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.

Yuriy Nemtsov · Accepted Answer · 2011-02-27 08:15:35Z

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, 2011 at 8:15

answered Feb 25, 2011 at 18:00

Yuriy Nemtsov

3,9154 gold badges33 silver badges44 bronze badges

5 Comments

celsowm Over a year ago

i tried "debugging" your code with alert and returns "false" with 111.1

Yuriy Nemtsov Over a year ago

@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?

celsowm Over a year ago

but actually using your code inside "keypress", the user cannot digits 111.11

Yuriy Nemtsov Over a year ago

@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).

celsowm Over a year ago

red and black is cool too ! But i need a 'mask', preventing the user from typing the wrong things

Peter Olson · Accepted Answer · 2011-02-25 17:44:59Z

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, 2011 at 17:44

Peter Olson

144k49 gold badges209 silver badges249 bronze badges

Comments

johusman · Accepted Answer · 2011-02-25 17:46:35Z

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, 2011 at 17:46

johusman

3,4721 gold badge19 silver badges11 bronze badges

1 Comment

johusman Over a year ago

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.

Collectives™ on Stack Overflow

Help to improve this javascript input mask

4 Answers 4

3 Comments

5 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related