JavaScript -Zeichenbeschränkung - Ungültige Zeichen werden vorübergehend angezeigt

Question

Ich verwende JavaScript, um die Zeichen verschiedener Texteintragsfelder als Form der clientseitigen Validierung sowie verbesserte Benutzerfreundlichkeit einzuschränken. Ich verwende den folgenden Code, um dies zu tun:

function validNumbers(caller) {
    var exp = /^[\d.]+/g;
    var str = '';
    if (caller.value.match(exp)) {
        str = caller.value.match(exp).toString();
    } else {
        str = '';
    }
    str = str.replace(/\D/g,'');
    caller.value = str;
}

Ich nenne diese Funktion mit OnKeypress = "ValidNumbers (this);" Und zum größten Teil funktioniert es wie ein Zauber. Das Problem ist, dass der Wert des Feldes, wenn ich ein ungültiges Zeichen in das Feld eingeben möchte ersetzt durch den Wert der nächsten Schlüssel visuell, auch wenn der nächste Schlüssel auch ungültig ist. Der gewünschte Effekt ist, dass der ungültige Wert, wenn eine ungültige Taste gedrückt wird, nicht einmal visuell angezeigt wird. Wie erledige ich das?

Bearbeiten: Ich habe die Antwort unten ausgewählt, weil ich auf dem richtigen Weg gebracht wurde. Ich musste sicherstellen alleine.

Answer 1

In Ihrer Funktion löschen Sie den Wert, nachdem er in das Textfeld eingegeben und bewertet wurde. Stattdessen müssen Sie verhindern, dass es insgesamt in das Textfeld eingegeben wird. Um dies zu erreichen, möchten Sie die Keydowns verwenden preventDefault() Methode:

onkeydown="function(e) { validNumbers(e); }"

function validNumbers(e) {
    if (e.keyCode == 1 || e.keyCode == 2 ... etc) {
        e.preventDefault();
    }
}

Dies blockiert bestimmte Zeichen (Referenz hier) vom Eingabe des Eingangsfeldes. Beachten Sie, dass diese Kopie nicht blockiert und einfügt, sodass Sie entweder die gesamte Zeichenfolge "OnPaste" bewerten oder "OnPaste" mit einem ähnlichen Ereignishandler verhindern müssen.

Dies ist auch keine Cross-Brower-Lösung, sollte aber Ihre Füße ausreichend nass machen. Sieh dir das an Jsfiddle Für ein Live -Beispiel.