Text Input: Limit input to numbers (0-9) and the minus sign (-). Not working as expected

Question

I am trying to limit keyboard input in my text field to numbers [0-9] and the minus sign - only (no copy/paste, etc.) and the delete key obviously.

The code works for limiting to numbers and the delete key but it doesn't work for the minus sign - part.

The user should only be able to enter a minus sign - in front of their number, if they try to enter 1 then - it should not input the - but right now the - part doesn't work at all.

Fiddle: http://jsfiddle.net/7XLqQ/1/

I think this piece of code is the issue but it looks fine. It checks that the text input is blank and if so it input the minus sign -.

// Only enter the minus sign (-) if the user enters it first
if (unicode == 45 && input.value == "") {
    return true;
}

My full code:

<input type="text" maxlength="10" id="myInput">

<script>
var input = document.getElementById("myInput");

input.onkeypress = function(e) {
   var unicode = e.keyCode;

    if (unicode == 49 || unicode == 50 || unicode == 51 || unicode == 52 || unicode == 53 || unicode == 54 || unicode == 55 || unicode == 56 || unicode == 57 || unicode == 48) {
        return true;
    } else {
        return false;   
    }

    // Only enter the minus sign (-) if the user enters it first
    if (unicode == 45 && input.value == "") {
        return true;
    }
};
</script>

Answer 1

Order of opperations, you are returning false on the 0-9 before you are ever asking about the minus sign. move the minus sign if block above the 0-9 if block and you are golden

<input type="text" maxlength="10" id="myInput">

<script>
var input = document.getElementById("myInput");

input.onkeypress = function(e) {
   var unicode = e.keyCode;

    // Only enter the minus sign (-) if the user enters it first
    if (unicode == 45 && input.value == "") {
        return true;
    }

    if (unicode == 49 || unicode == 50 || unicode == 51 || unicode == 52 || unicode == 53 || unicode == 54 || unicode == 55 || unicode == 56 || unicode == 57 || unicode == 48) {
        return true;
    } else {
        return false;   
    }


};
</script>

Answer 2

I'd suggest:

var input = document.getElementById("myInput");

input.onkeypress = function(e) {
    switch (e.keyCode){
        case 45:
            return this.value.length == 0 ? true : false;
            break;
        case 48:
        case 49:
        case 50:
        case 51:
        case 52:
        case 53:
        case 54:
        case 55:
        case 56:
        case 57:
            return true;
            break;
        default:
            return false;
            break;
    }
};

JS Fiddle demo.

The reason your original code failed is simply that you'd already returned from the function before the if condition could be assessed. In this version if the - key is pressed a ternary returns true if there is no current value (so the - will be the first character), or false if there is already a value (and therefore the - will not be the first character).

Answer 3

keyCode is the wrong property in all browsers except IE. You need charCode or which in other browsers. Using this you'll get character code instead and can use a regular expression to test the typed character. You also need to allow non-printable keypresses such as delete, backspace and arrow keys in browsers that fire keypress events for such keys.

Demo: http://jsfiddle.net/7XLqQ/3/

var input = document.getElementById("myInput");

input.onkeypress = function(e) {
    e = e || window.event;
    var charCode = (typeof e.which == "number") ? e.which : e.keyCode;

    // Allow non-printable keys
    if (!charCode || charCode == 8 /* Backspace */ ) {
        return;
    }

    var typedChar = String.fromCharCode(charCode);

    // Allow numeric characters
    if (/\d/.test(typedChar)) {
        return;
    }

    // Allow the minus sign (-) if the user enters it first
    if (typedChar == "-" && this.value == "") {
        return;
    }

    // In all other cases, suppress the event
    return false;
};

There is one case that isn't considered here, which is when the user places the caret at the start of the input and types a minus sign. For that, you'd need to detect the caret position. Here's some cross-browser code to detect whether the caret is at the start of the input, adapted from this answer:

function isCaretAtTheStart(el) {
    if (typeof el.selectionEnd == "number") {
        // Modern browsers
        return el.selectionEnd == 0;
    } else if (document.selection) {
        // IE < 9
        var selRange = document.selection.createRange();
        if (selRange && selRange.parentElement() == el) {
            // Create a working TextRange that lives only in the input
            var range = el.createTextRange();
            range.moveToBookmark(selRange.getBookmark());
            return range.moveEnd("character", -el.value.length) == 0;
        }
    }
    return false;
}

Here's a revised demo: http://jsfiddle.net/7XLqQ/5/

Finally, my favourite resource on JavaScript key events, which will tell you everything you need to know: http://unixpapa.com/js/key.html

Answer 4

I'd suggest:

$(".class_name").keypress(function (e) {
   if (e.which != 8 && e.which != 0 && e.which != 45 && (e.which < 48 || e.which > 57)) {
      return false;
   }
});