Javascript limit text field to positive and negative numbers

Question

There'a way in javascript to allow the user input in a text field (input type="text") only digits but optionally having the minus before them? (I.e. only negative and positive number)

score 2 · Accepted Answer · edited May 23 '17 at 12:30

<input type='text' onkeypress='return numbersOnly(this,event,false,true);'>

function numbersOnly(Sender,evt,isFloat,isNegative) {
            if(Sender.readOnly) return false;       

            var key   = evt.which || !window.event ? evt.which : event.keyCode;
            var value = Sender.value;

            if((key == 46 || key == 44) && isFloat){                
                var selected = document.selection ? document.selection.createRange().text : "";
                if(selected.length == 0 && value.indexOf(".") == -1 && value.length > 0) Sender.value += ".";
                return false;
            }
            if(key == 45) { // minus sign '-'
                if(!isNegative) return false;
                if(value.indexOf('-')== -1) Sender.value = '-'+value; else Sender.value = value.substring(1);
                if(Sender.onchange != null) {
                    if(Sender.fireEvent){
                        Sender.fireEvent('onchange');
                    } else {
                        var e = document.createEvent('HTMLEvents');
                            e.initEvent('change', false, false);
                        Sender.dispatchEvent(e);
                    }
                }

                var begin = Sender.value.indexOf('-') > -1 ? 1 : 0;
                if(Sender.setSelectionRange){
                    Sender.setSelectionRange(begin,Sender.value.length);
                } else {
                    var range = Sender.createTextRange();
                    range.moveStart('character',begin);
                    range.select();                 
                }

                return false;
            }
            if(key > 31 && (key < 48 || key > 57)) return false;
        }

Related question: HTML Text Input allow only Numeric input

score 1 · Answer 2 · answered Nov 08 '12 at 13:29

You can bind a listener (in javascript, that is) to the onKeyUp event (or the one that best fits your needs) and check what is the user trying to insert. Then you can decide if you'll let him insert that character or not.

NOTE: You'll want to control also the copy/paste event as the user could paste some text instead of writing it!

score 1 · Answer 3 · answered Nov 08 '12 at 14:04

1

Use this. It works.

https://raw.github.com/SamWM/jQuery-Plugins/master/numeric/jquery.numeric.js

$(document).ready(function(){
    $(".numeric").numeric({negative :true});
});

answered Nov 08 '12 at 14:04

kjana83

398
3
16

score 0 · Answer 4 · answered Nov 08 '12 at 13:30

0

Try the following regexp:

/^-?\d+$/

answered Nov 08 '12 at 13:30

Artem Vyshniakov

16,355
3
43
47

The problem of the regexp is i'm using it with the function replace which control the input letter by letter and i risk to accept input like this 4-53. The control i wish to do had to be done while the user types not after like a validation. Thank you anyway :) – Sasha Grievus Nov 09 '12 at 10:19

score 0 · Answer 5 · answered Jun 13 '15 at 16:32

This is the best solution I came up with for positive and negative integers only

<input type="text" onkeyup="this.value = (this.value[0] === '-') ? ('-' + this.value.replace(/[^0-9]/g, '')) : (this.value.replace(/[^0-9]/g, ''));" pattern="^-?\d+" />

You can check it out here http://jsfiddle.net/4g08ofz6/

The pattern

pattern="^-?\d+"

is just an extra layer of validation for when the value is pasted in or dragged in but remember you should still always validate on the server site

Javascript limit text field to positive and negative numbers

5 Answers5

Linked