CODEWITHSUNDEEP
javascriptdom-events
Saddam Meshaal
Saddam Meshaal

Reputation: 552

How to valid Numeric values onkeypress

I have this simple HTML document

<input type="text"  id="my_text" onkeypress="valid_numbers(event);" size="30"/>
<script type="javascript">
function valid_numbers(e)
{
        var key=e.which || e.KeyCode;
        if  ( key >=48 && key <= 57)
         // to check whether pressed key is number or not 
                return true; 
         else return false;
}
</script>

What I want is:

onkeypress of my_text if the pressed key is number allow otherwise deny writing of the character.

But the above code doesn't work, my_text element accept any character, what is wrong with the above code ?!..

Help Please!..

Upvotes: 5

Views: 36855

Answers (7)

navizak
navizak

Reputation: 441

Allows only [0-9] number, numpad number, arrow, BackSpace, Tab, Del as wel as Ctrl + C, Ctrl + V, Ctrl + A. Allow only one dot. Remove if last char is dot on a blur event.

element.on('keydown', function(e) {
    var arrowsKeyCodes = [37, 38, 39, 40];
    var numPadNumberKeyCodes = [96, 97, 98, 99, 100, 101, 102, 103, 104, 105];
    var dots = [110, 190];
    var tabBackDel = [8, 9, 46];
    var acv = [65, 67, 86];

    // Allow only one dot.
    if (e.target.value.indexOf('.') !== -1 && dots.indexOf(e.keyCode) !== -1) {
        event.preventDefault();
    }

    // allow only [0-9] number, numpad number, arrow,  BackSpace, Tab, Del
    // Ctrl + C, Ctrl + V, Ctrl + A
    if (
        (e.keyCode < 48 &&
            arrowsKeyCodes.indexOf(e.keyCode) === -1 || e.keyCode > 57 &&
            numPadNumberKeyCodes.indexOf(e.keyCode) === -1 &&
            dots.indexOf(e.keyCode) === -1
        ) &&
        tabBackDel.indexOf(e.keyCode) === -1 &&
        (e.ctrlKey === false || e.ctrlKey === true && acv.indexOf(e.keyCode) === -1)
    ) {
        e.preventDefault();
    }
});

element.on('blur', function(e) {
    var value = e.target.value;
    if (value.substring(value.length - 1) === '.')
        e.target.value = value.substring(0, value.length - 1)
});

Upvotes: 1

shishir
shishir

Reputation: 851

You can Simply use JavaScript or HTML5 to execute this JavaScript:

<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'></input>

HTML 5 (does not require JavaScript, and also does not behave in standard way in many modern browsers.)

<input type="number">

FIDDLE

More on this may look here.

Upvotes: 0

RobG
RobG

Reputation: 147413

Some very complex answers, but it can be as simple as using a regular expression to return the result of checking if the input was a number or not:

<input onkeypress="return /\d/.test(String.fromCharCode(event.keyCode || event.which))">

Note that this will not stop entering of non-digit characters by pasting, dragging and dropping or script.

Upvotes: 3

swayamraina
swayamraina

Reputation: 3158

var input = document.getElementById('my_text');
input.onkeydown = function(e) {
    var k = e.which;

    if ( (k < 48 || k > 57) && (k < 96 || k > 105) && k!=8) {
        e.preventDefault();
        return false;
    }
};

and

<input type="text"  id="my_text" size="30"/>

Upvotes: 2

Morteza Tourani
Morteza Tourani

Reputation: 3536

I think the easy way to do this would be:

<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' />

But the problem comes up when you paste some text then HTML5's number type input may be a better choice:

<input type="number" />

BTW you can find better suggestions if you search the SO like this.

Upvotes: 4

Manish Singh
Manish Singh

Reputation: 1004

<html>
<body>
    <input id="edValue" type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()"><br>
   </body>

<script>
    function edValueKeyPress()
    {
        var edValue = document.getElementById("edValue");
        var s = edValue.value;

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

      if  ( s >=48 && s <= 57)

         // to check whether pressed key is number or not 
               return true; 


         else return false;



    }
</script>    

</html>

Use this tested code.it's help you.

Upvotes: 0

Prem Raj
Prem Raj

Reputation: 847

Have not tried this out, but you can use parseInt in your function to check like:

var t = document.getElementById("my_test").value;

if (parseInt(t) == 'NaN') {
    // not a number
}

Upvotes: 0

Related Questions