Есть ли какое-либо событие между нажатием клавиши и keyup в JavaScript?

Question

У меня есть ситуация, когда мне нужно перехватить каждую нажатую клавишу в div contentEditable Но когда происходит событие нажатия клавиши, если я это сделаю,

document.getElementById("divEditor").innerHTML

Я не могу получить полный текст (не нажат последний символ)

Кроме того, событие keyup не срабатывает при непрерывных нажатиях клавиш. Что я могу сделать, чтобы ключевое событие имело полное значение?

Answer 1

keyup - единственное событие, которое может видеть состояние после нажатия клавиши.

Один из подходов - перехватить keydown и установить тайм-аут для некоторой обработки после нажатия клавиши:

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

Однако, если также возможно редактировать без нажатия клавиш (как правило, с помощью перетаскивания и пунктов меню, таких как вырезание и вставка), никакие проверки ключевых событий не помогут. Вместо этого вы должны просто опросить состояние, чтобы увидеть, изменилось ли оно. Вы можете сделать это с помощью обработчика onkeyup или тайм-аута onkeydown, чтобы ускорить обновление конкретного случая.

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

(для простоты используется элемент ввода, но он в равной степени применим к contentEditable.)

Answer 2

а как же onblur()? вам понадобятся две функции: функция нажатия клавиш, а затем вызов onblur (), когда фокус покинет текстовое поле. Это должно дать вам доступ к остальной части текста.

Answer 3

Кажется, лучшим способом было бы иметь поле INPUT (position:absolute; left:-1000px) и добавить в него все 3 события (keydown keypress keyup).

Теперь вы можете использовать значение этого поля ввода, CTRL + Z работает и вы можете вставлять значения.

Все, что вам нужно сделать, это установить Focus в поле ввода.

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;