C'è qualche evento tra la pressione del tasto e keyup in javascript?

Question

Ho una situazione in cui ho bisogno di intercettare ogni tasto premuto i thats a un div contentEditable. Ma quando l'evento keypress accade, se lo faccio,

document.getElementById("divEditor").innerHTML

Non riesco a ottenere il testo completo (non ha l'ultimo carattere premuto)

Inoltre, evento KeyUp non si attiva per la pressione dei tasti continui. Che cosa posso fare per avere un evento chiave che ha l'intero valore?

Answer 1

keyup è l'unico evento che viene a vedere lo stato post-pressione di un tasto.

Un approccio è quello di intrappolare keydown e impostare un timeout per fare un po 'di elaborazione dopo la pressione del tasto:

input.onkeydown= function() {
    setTimeout(function() {
        // do something
    }, 1);
};

Tuttavia, se è anche possibile fare modifiche, senza pressione di un tasto (e di solito è, tramite drag-and-drop e le voci di menu come taglia-e-incolla), nessuna quantità di controllo per gli eventi principali sarà di aiuto. Invece, si deve semplicemente interrogare lo stato per vedere se è cambiato. È possibile eseguire questo con un gestore onkeyup o timeout onkeydown per fare quel particolare aggiornamento caso più veloce.

var oldstate= input.value;
function checkState() {
    if (input.value!=oldstate) {
        // do something
        oldstate= input.value;
    }
}
setInterval(checkState, 1000);
input.onkeyup= checkState;

(Questo utilizza un elemento input per semplicità, ma è ugualmente applicabile a contentEditable.)

Answer 2

che dire onblur()? si avrebbe bisogno di due funzioni, la funzione premere il tasto, e poi un onblur () chiamata quando lo stato attivo ha lasciato la casella di testo. Questo dovrebbe dare accesso al resto del testo.

Answer 3

Sembra che il modo migliore sarebbe quello di avere un campo di input (position:absolute; left:-1000px) e aggiungere tutti i 3 eventi (keydown keypress keyup) ad esso.

Ora è possibile utilizzare il valore di questo campo di input, opere CTRL + Z ed è possibile incollare i valori.

Tutto quello che devi fare che è quello di setFocus al campo di inserimento.

var user_action = function ()
{
   document.getElementById("divEditor").innerHTML =    document.getElementById("myhiddenInput").value;
};

document.getElementById("myhiddenInput").onchange = user_action;
document.getElementById("myhiddenInput").onkeydown  = user_action;
document.getElementById("myhiddenInput").onkeyup    = user_action;
document.getElementById("myhiddenInput").onkeypress = user_action;

document.getElementById("divEditor").onclick = document.getElementById("myhiddenInput").focus;