Javascript Limit Text Field To Positive And Negative Numbers

July 31, 2022 Post a Comment

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 numb

Solution 1:

<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

Solution 2:

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!

Solution 3:

Use this. It works.

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

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

Solution 4:

Try the following regexp:

/^-?\d+$/

Solution 5:

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 File