Javascript restrizione personaggio - caratteri non validi visualizzati temporaneamente

Question

Sto usando Javascript per limitare i caratteri dei vari campi di immissione di testo come una forma di validazione lato client e una migliore usabilità. Sto usando il seguente codice per fare questo:

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;
}

Io chiamo questa funzione con onkeypress = "validNumbers (this);" e, per la maggior parte, funziona come un fascino. Il problema è che, quando si digita un carattere non valido nel campo, il valore del campo sembra avere aggiornato (dal punto di vista del Javascript), ma i resti dei personaggi fino a quando ho colpito il tasto successivo, a quel punto è sostituito dal valore della chiave seguente visivamente, anche se la chiave successivo è valido pure. L'effetto desiderato è che, quando viene premuto un tasto non valido, il valore valido non mostra anche fino visivamente. Come posso realizzare questo?

Edit: ho selezionato la risposta qui sotto, perché mi ha fatto sulla strada giusta. Ho dovuto fare in modo di aggiungere e.shiftKey alla mia lista di eventi esclusi, al fine di evitare che i caratteri come "! @ # $% ^ & * () _ +", Ma che non era un problema per me trovare fuori per conto mio.

Answer 1

Nella funzione si sta cancellando il valore dopo che è stato immesso nel campo di testo e valutati. Invece, è necessario per evitare che venga inserito nel campo di testo del tutto. Per fare questo, si desidera utilizzare il metodo preventDefault() del keydown:

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

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

Questo bloccherà caratteri specifici ( riferimento qui ) dal mai entrare nel campo di immissione. Si noti che questo non bloccherà copia ed incolla in modo si sia ancora bisogno di valutare l'intera stringa 'onpaste' o prevenire 'onpaste' con un gestore di eventi simili.

Questa non è una soluzione cross-Brower, ma deve avere i piedi bagnati abbondanza. Vedere questo JSFiddle per un esempio, dal vivo.