Javascript Limit Text Field To Positive And Negative Numbers

March 31, 2024 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);'>

functionnumbersOnly(Sender,evt,isFloat,isNegative) {
            if(Sender.readOnly) returnfalse;       

            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 += ".";
                returnfalse;
            }
            if(key == 45) { // minus sign '-'if(!isNegative) returnfalse;
                if(value.indexOf('-')== -1) Sender.value = '-'+value; elseSender.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();                 
                }

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

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

<inputtype="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 Apprenticeships