Numeric Fields on HTML elements

Question

I have been trying to allow numeric field and one decimal point in my Grid.Its work fine when its suitable for input box.

when i am calling onKeyPress the script work fine for "input box" rather than on "Div element"

In "Div element",when i am supposed to use this .It allow to access only for number rather Alphabet

hence,while coming to "decimal place" its not working as it should.[ It's allowing many Dot's]

<script>  
       function getKey(e)  
      {  
        if (window.event)  
           return window.event.keyCode;  
        else if (e)  
           return e.which;  
        else  
           return null;  
      }  
      function restrictChars(e, obj)  
      {  
        var CHAR_AFTER_DP = 2;  // number of decimal places  
        var validList = "0123456789.";  // allowed characters in field  
        var key, keyChar;  
        key = getKey(e);  
        if (key == null) return true;  
        // control keys  
        // null, backspace, tab, carriage return, escape  
        if ( key==0 || key==8 || key==9 || key==13 || key==27 )  
           return true;  
        // get character  
        keyChar = String.fromCharCode(key);  
        // check valid characters  
        if (validList.indexOf(keyChar) != -1)  
        {  
          // check for existing decimal point  
          var dp = 0;  
          if( (dp = obj.value.indexOf( ".")) > -1)  
          {  
            if( keyChar == ".")  
              return false;  // only one allowed  
            else  
            {  
              // room for more after decimal point?  
              if( obj.value.length - dp <= CHAR_AFTER_DP)  
                return true;  
            }  
          }  
          else return true;  
        }  
        // not a valid character  
        return false;  
      }  
    </script>  

<div onKeyPress="return restrictChars(event, this)">

Any Ideas how we could achieve it

What is use case for 'keyPress' event on 'div' and how one would press key in the div? — Dhanu Gurung, Dec 26 '13 at 08:29
Are you talking about applying this to a content-editable div? Also, regarding your test for characters after the decimal point, you do realise the user can click at the start of a field that already has several digits and add a decimal point there? — nnnnnn, Dec 26 '13 at 08:29
I have been using handson-table Grid.so,I need to restrict each every cell to allow only numeric & decimal.For that,purpose I have been using above given Script.But it allow's me to restrict number. Decimal point i couldn't achieve it. — user2742540, Dec 26 '13 at 12:55
ah,consider for eg( if user as an "Div" element and he also as 5 input box is beneath div)why can't we use "onkeypress" property as common on div element .Tell me if am wrong @budhram — user2742540, Dec 26 '13 at 13:08
user2742540: Check this for binding keypress event in div http://stackoverflow.com/questions/3149362/capturing-key-press-event-in-div since they way you are doing it is wrong. In your case, 'obj' will always refer to 'div' not particular 'input' box. Hence, 'obj.value' always be 'undefined' since value is not defined for 'div'. It you want to use jQuery, then check 'Alex' solution. — Dhanu Gurung, Dec 26 '13 at 13:24

score 0 · Accepted Answer · answered Dec 26 '13 at 08:29

For an <input>, it is required to check the value attribute, hence why obj.value is used in your code above. A div element doesn't have a value attribute. You have to check it's innerHTML (mdn docs). If you replace all instances of obj.value with obj.innerHTML, your code should work.

score 0 · Answer 2 · answered Dec 26 '13 at 08:40

0

You need to use jQuery keypress() method to handle this right:

$("#d input").keypress(function(event){
    return restrictChars(event);
});

See the working fiddle: http://fiddle.jshell.net/ePvJ8/1/

answered Dec 26 '13 at 08:40

alex

80
5

Numeric Fields on HTML elements

2 Answers2