Rileva tasti di stampa

Question

Devo rilevare se il tasto che è stato appena premuto è un tasto stampabile, come un carattere, eventualmente accentato, un numero, uno spazio, un simbolo di punteggiatura e così via, o una chiave non stampabile, come ENTER, TAB o DELETE.

Esiste un modo affidabile per farlo in Javascript, oltre a elencare tutte le chiavi non stampabili e sperare di non dimenticarne alcune?

Answer 1

Ho risposto ieri a similar question. Si noti che è necessario utilizzare l'evento keypress per qualsiasi carattere correlato; keydown non funzionerà.

Direi che Inserire è stampabile, a proposito, e questa funzione lo considera. Se non siete d'accordo, è possibile modificarlo per filtrare pressioni dei tasti con la which o keyCode di proprietà del set evento per 13.

function isCharacterKeyPress(evt) { 
    if (typeof evt.which == "undefined") { 
     // This is IE, which only fires keypress events for printable keys 
     return true; 
    } else if (typeof evt.which == "number" && evt.which > 0) { 
     // In other browsers except old versions of WebKit, evt.which is 
     // only greater than zero if the keypress is a printable key. 
     // We need to filter out backspace and ctrl/alt/meta key combinations 
     return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8; 
    } 
    return false; 
} 

var input = document.getElementById("your_input_id"); 
input.onkeypress = function(evt) { 
    evt = evt || window.event; 

    if (isCharacterKeyPress(evt)) { 
     // Do your stuff here 
     alert("Character!"); 
    } 
}); 

Answer 2

Fortunatamente, questo compito è molto più facile nei browser moderni. È ora possibile utilizzare KeyboardEvent.key per rilevare una chiave stampabile tramite la sua lunghezza.

test.onkeydown = e => { 
 
    let isPrintableKey = e.key.length === 1; 
 
    alert(`Key '${e.key}' is printable: ${isPrintableKey}`); 
 
}

<input id="test">

Oltre a questo, si può anche rilevare eventuali altre chiavi dalla lista, come Enter, Delete, Backspace, Tab, ecc

Questo metodo è molto più affidabile semplicemente perché a differenza di event.which, event.key è già standardizzato.