JavaScript: convalida dell'input nell'evento keydown

Question

Sto tentando di eseguire la convalida delle informazioni rispetto all'input di testo utente nel processo dell'evento keydown. Il motivo per cui sto tentando di convalidare nell'evento keydown è perché non desidero visualizzare i caratteri quelli che sono considerati illegali nella casella input all'inizio.

La convalida sto scrivendo è come questo,

function validateUserInput(){ 
    var code = this.event.keyCode; 
    if ((code<48||code>57) // numerical 
     &&code!==46 //delete 
     &&code!==8 //back space 
     &&code!==37 // <- arrow 
     &&code!==39) // -> arrow 
    { 
    this.event.preventDefault();   
    } 
} 

posso andare avanti in questo modo, però sto vedendo svantaggi di questa implementazione. Questi sono, per esempio:

1. La dichiarazione condizionale diventa più lunga e più lunga quando metto più condizioni da esaminare.
2. keyCodes può essere diverso dai browser.
3. Devo controllare non solo ciò che non è legale, ma anche controllare ciò che è eccezionale. Negli esempi precedenti, elimina, backspace e arrow le chiavi sono eccezionali.

Ma la funzione che non voglio perdere è quella di non visualizzare l'input nel textarea a meno che non superi la convalida. (Nel caso in cui l'utente provi a inserire caratteri non validi nello textarea, non dovrebbe apparire nulla). Per questo motivo non sto facendo una convalida sull'evento keyup.

Quindi la mia domanda è:

1. sono modi migliori lì per convalidare l'input in keydown evento di controllo keyCode da keyCode?
2. Esistono altri modi per acquisire gli input utente diversi dall'evento keydown prima che il browser lo visualizzi? E un modo per mettere la convalida su di esso?

Grazie per l'aiuto in anticipo.

Answer 1

Se stai controllando una chiave stampabile, che è esattamente ciò sembra che tu stia facendo, dovresti usare l'evento keypress, poiché è l'unico posto dove sarai in grado di ottenere informazioni affidabili sul carattere rappresentato dalla pressione della tastiera. Non è possibile rilevare i tasti numerici in modo affidabile nell'evento keydown. Inoltre, è una cattiva idea sopprimere i tasti freccia e cancellare/tasti backspace. Cosa guadagni dal farlo?

Ci sono anche alcuni errori: in Firefox, è necessario per ottenere l'oggetto Event dal parametro passato nella funzione gestore di eventi, e se si sta utilizzando una funzione DOM0 gestore di eventi piuttosto che addEventListener() o attachEvent(), si dovrebbe utilizzare return false; per sopprimere il comportamento predefinito. Ecco il mio codice suggerito:

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

input.onkeypress = function(evt) { 
    evt = evt || window.event; 
    var charCode = evt.which || evt.keyCode; 
    var charStr = String.fromCharCode(charCode); 
    if (/\d/.test(charStr)) { 
     return false; 
    } 
}; 

Answer 2

Non penso che sia necessaria la parte preventDefault. Se si desidera intercettare i tasti (tramite event.keyCode o combinazioni utilizzando, ad esempio, event.ctrlKey + event.keyCode), è possibile verificare se è consentito keyCode. In tal caso, è sufficiente restituire true, altrimenti restituire false. Se si restituisce false, l'input chiave non verrà scritto nel campo di input, altrimenti lo sarà.

Non riesco a pensare a modi migliori per utilizzare KeyCode. È possibile utilizzare String.fromCharCode([keyCode]) se si desidera verificare i valori dei caratteri specifici, ma continua a bollire in un ciclo per controllare i codici chiave che si desidera convalidare. Può essere un switch ... case potrebbe offrire un po 'più leggibilità.

Ecco un pezzo di codice da un gestore di eventi KeyDown che uso (solo per la dimostrazione, in realtà non fa nulla):

function handleKey(e, thisFld) { 
     thisFld = (thisFld || this); 
       e = e || event; 
    if (!e) { 
     return true; 
    } 

    var isCtrl = e.ctrlKey, 
     isShift = e.shiftKey, 
     isAlt = e.altKey, 
     kc = e.keyCode || e.which, 
     codes = [27, 38, 40], 
     keys = { 
       escape: 27, 
       up: 38, 
       down: 40, 
       ins: 45, 
       del: 46, 
       one: 49 
       }; 

    if (isCtrl && kc === keys.del) { ... } 
    if (isAlt && kc === keys.ins) { ... } 
     //etc 
    return true; 
} 

Answer 3

ecco un violino con cui si può giocare e può fornire più informazioni.

jsfiddle: keydown/keypress demo w/ info display

Sembrerebbe che i browser più recenti utilizzano preventDefault(). Il codice che segue è simile a quello che ho messo su jsfiddle ma è autonomo e può essere incollato in un file HTML che è possibile accedere a livello locale per prova (nota è mobile friendly per test del dispositivo.

<html> 
<head> 
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, user-scalable=no"/> 
<style> 
.b {color:blue;} 
.r {color:red;} 
input {font-size:18px;} 
</style> 
<script> 
function byId(el) {return document.getElementById(el)} 
function sfcc (n) {return String.fromCharCode(n);} 
function foo(event) { 
    var he='&#x'+event.keyIdentifier.split('+')[1]+';'; 
    var html='' 
    var cn=event.target.className; 
    html+='kc: [<span class="b">'+sfcc(event.keyCode)+'</span>] '; 
    html+='wh: [<span class="b">'+sfcc(event.which)+'</span>] '; 
    html+='he: [<span class="b">'+he+'</span>]<br>'; 
    for (i in event) 
     if (["string","boolean","number"].indexOf(typeof event[i]) >-1 && i.toUpperCase()!=i) 
      html+='<span>'+i + '</span>: [<span class="r">'+event[i]+'</span>]<br>'; 
    byId('kc').innerHTML=html; 
    switch (cn) { 
     case "pd": event.preventDefault(); return; 
     case "rf": return false; 
    } 
} 
</script> 
</head> 
<body> 
kp/pd: <input class="pd" type="text" onkeypress="foo(event)"/><br> 
kp/rf: <input class="rf" type="text" onkeypress="foo(event)"/><br> 
kd/pd: <input class="pd" type="text" onkeydown="foo(event)"/><br> 
kd/rf: <input class="rf" type="text" onkeydown="foo(event)"/><br> 
<div id="kc"></div> 
</body> 
</html> 

Answer 4

Così, ho ha scoperto che pressione di un tasto è grande per i caratteri stampabili, e keydown per tutto il resto. è possibile controllare il event.charCode su keypress per i caratteri stampabili (dovrebbe essere 0 per non stampabile). è possibile utilizzare event.keyCode su keydown per le frecce e così via.

Ecco come ho ottenuto il completamento automatico per lavorare su Chrome e Firefox.