HTML-Texteingabe erlaubt nur numerische Eingaben

Question

Gibt es eine schnelle Möglichkeit, eine HTML-Texteingabe ( <input type=text /> ), um nur numerische Tastenanschläge (plus '.') zuzulassen?

Answer 1

HTML5 hat <input type=number> welches für Sie das Richtige ist. Derzeit unterstützt nur Opera es nativ, aber es gibt ein Projekt die eine JavaScript-Implementierung hat.

Answer 2

HTML5 unterstützt Regexe, so dass Sie dies verwenden können:

<input id="numbersOnly" pattern="[0-9.]+" type="text">

Warnung: Einige Browser unterstützen dies noch nicht.

Answer 3

Und noch ein Beispiel, das für mich sehr gut funktioniert:

function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
        return true;
    }
};

Auch an das Ereignis Tastendruck anhängen

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

Und HTML:

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

Hier ist ein jsFiddle-Beispiel

Answer 4

Ich habe mich für eine Kombination der beiden hier genannten Antworten entschieden, d. h.

<input type="number" />

y

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

<input type="text" onkeypress="return isNumberKey(event);">

Answer 5

JavaScript

function validateNumber(evt) {
    var e = evt || window.event;
    var key = e.keyCode || e.which;

    if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
    // numbers   
    key >= 48 && key <= 57 ||
    // Numeric keypad
    key >= 96 && key <= 105 ||
    // Backspace and Tab and Enter
    key == 8 || key == 9 || key == 13 ||
    // Home and End
    key == 35 || key == 36 ||
    // left and right arrows
    key == 37 || key == 39 ||
    // Del and Ins
    key == 46 || key == 45) {
        // input is VALID
    }
    else {
        // input is INVALID
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

zusätzlich könnten Sie Komma, Punkt und Minus (,.-) hinzufügen

  // comma, period and minus, . on keypad
  key == 190 || key == 188 || key == 109 || key == 110 ||

HTML

<input type="text" onkeydown="validateNumber(event);"/ >