Событие когда кнопку клавиатуры отпускают в поле ввода
onkeyup javascript, оно же "keyup" в js, или "Событие когда кнопку клавиатуры отпускают в поле ввода", сколько способов существует определить/отследить когда кнопку клавиатуры отпускают в поле ввода в javascript.
Подробно о "onkeyup Event"
- Использование "onkeyup" внутри тега.
- Использование onkeyup + function
- Пример использования keyup + addEventListener
Использование "onkeyup" внутри тега.
Одним из способов использования onkeyup - размещение "onkeyup" внутри тега.
Для того, чтобы продемонстрировать использование "onkeyup" нам понадобится элемент Dom - пусть это будет div, и добавим ему class="onkeyup" :
Также туда добавим событие "onkeyup" с функцией myFunction:
Немного стилей для нашего блока:
background: #e9e9e9;
width: 300px;
height: 100px;
margin: auto;
border: 1px solid;
}
Напишем нашу функцию:
function myFunction() {
document.getElementById("demo").innerHTML = "Вы отпустили кнопку клавиатуры";
}
</script>
Результат использования onkeyup в теге:
Будем передавать - пусть это будет текст в отдельный div "Сигнал об отпуске кнопки".
Установите курсор мыши на поле ввода и нажмите любую кнопку клавиатуры и потом отпустите:
Сигнал об отпуске кнопки
Использование onkeyup + function
Второй способ использования onkeyup равно function.
Нам опять понадобится div, внутрь добавим id, чтобы обратиться к тегу
В абзац "p" будем передавать полученные данные:
Стили повторять не буду - см. выше.
Соберем скрипт:
<script>
document.getElementById("theDIV").onkeyup = function(e) {
document.getElementById("demo_1").innerHTML = "Вы отпустили кнопку клавиатуры";
};
</script>
Результат onkeyup + function
Установите курсор мыши на поле ввода и нажмите любую кнопку клавиатуры и потом отпустите:
Сигнал об отпуске кнопки
Пример использования keyup + addEventListener
Следующий вариант использования onkeyup, аналогичен первому, только здесь будем использовать keyup + "addEventListener":
<div id="theDIV_2" class="onkeyup"></div>
<p id="demo_2"></p>
Аналогичные первому пункту.
<script>
document.getElementById("theDIV_2").addEventListener("keyup", function(e) {
document.getElementById("demo_2").innerHTML = "Вы отпустили кнопку клавиатуры";
});
</script>
Результат onkeyup + addEventListener
Установите курсор мыши на поле ввода и нажмите любую кнопку клавиатуры и потом отпустите:
Сигнал об отпуске кнопки