Событие когда кнопку клавиатуры отпускают в поле ввода

Что такое onkeyup, разберем синтаксис, все способы использования события "Onkeyup". И обязательно живые примеры и вы сможете скопировать код "использования onkeyup".

О всех способах использования "onkeyup"

1. Onkeyup, что такое.
2. Onkeyup синтаксис.
3. Использование "onkeyup" внутри тегаhtml.
Код в сборе использования "onkeyup" в html.
Пример использования "onkeyup" в html.

4. Использование onkeyup в javascript
Код в сборе использования "onkeyup" в javascript.
Пример использования "onkeyup" в javascript.

5. onkeyup с методом addeventlistener
Код в сборе использования "onkeyup" и addeventlistenert.
Пример использования "onkeyup" и addeventlistenert.

Onkeyup, что такое, синтаксис.

С самого начала - давайте разберем слово "onkeyup".

Как переводится слово "onkeyup".

Слово "onkeyup" двусоставное:

on - "на", "о", "с", "над" - предлог, "дальше" - наречие.

key - ключ.

up - "вверх", "наверху" - наречие, "на" - предлог.

Но как же переводится слово "onkeyup".

onkeyup - включение.

Что означает слово "onkeyup" в случае с сайтом.

onkeyup - это "событие(event) когда кнопку клавиатуры отпускают".

Onkeyup синтаксис.

Приступим к синтаксису "onkeyup".

Всего существует три варианта синтаксиса "onkeyup":

Onkeyup в HTML:

<element onkeyup="myScript">

Смотри подробнее.

Onkeyup в JavaScript:

object.onkeyup = function(){myScript};

Смотри подробнее.

Onkeyup в JavaScript, используя метод addEventListener():

object.addEventListener("keyup", Script);

Смотри подробнее.

Использование "onkeyup" внутри тегаhtml.

Одним из способов использования onkeyup - размещение "onkeyup" внутри тега.

Для того, чтобы использовать "onkeyup" в html

Тег input на котором будем испытывать событие "onkeyup", помещаем прямо внутрь тега.

Далее равно и какую-то произвольную функцию(function):

<input onkeyup="myFunction()">

Javascript

Напишем нашу функцию с использованием "onkeyup":

Пишем слово "function", далее название функции "myFunction()".

Внутрь помещаем alert с произвольным текстом:

<script>

function myFunction() {

alert("Вы отпустили кнопку клавиатуры");

}

</script>

Соберем весь код вместе:

Код в сборе использования "onkeyup" в html.

HTML:

<input onkeyup="myFunction()">

Javascript

<script>

function myFunction() {

alert("Вы отпустили кнопку клавиатуры");

}

</script>

Пример использования "onkeyup" в html.

Для того, чтобы проверить работоспособность нашего примера использования "onkeyup" в html - разместим выше приведенный код прямо здесь!

Для того, чтобы протестировать "onkeyup":

Поставьте мышку на поле ввода.

И нажмите любую кнопку и можете немного не отпускать...

Далее отпускаем кнопку и вы увидите срабатывание события "onkeyup"

Использование onkeyup в javascript

Рассмотрим использование onkeyup в javascript.

Для того, чтобы использовать "onkeyup в javascript" вам потребуется:

Html:

Снова вам потребуется тег input.

В него помещаем id:

<input id="on_keyup">

Javascript.

Любым из способов нужно обратиться к тегу по id.

document.getElementById("on_keyup")

Далее слово "onkeyup" через точку.

Функция... и дале все тоже самое, что и в пункте onkeyup в html:

<script>

document.getElementById("on_keyup").onkeyup = function() {

alert("onkeyup в javascript");

};

</script>

Соберем весь код вместе:

Код в сборе использования "onkeyup" в javascript.

HTML:

<input id="on_keyup">

Javascript

<script>

document.getElementById("on_keyup").onkeyup = function() {

alert("onkeyup в javascript");

};

</script>

Пример использования "onkeyup" в javascript.

Для того, чтобы проверить работоспособность нашего примера использования "onkeyup" в javascript - разместим выше приведенный код прямо здесь!

Для того, чтобы протестировать "onkeyup":

Поставьте мышку на поле ввода.

И нажмите любую кнопку и можете немного не отпускать...

Далее отпускаем кнопку и вы увидите срабатывание события "onkeyup"

Onkeyup с методом addeventlistener.

Теорию "onkeyup с методом addeventlistener" писать не буду, поскольку ... оана аналогична предыдущему пункту... смысла заново писать нет.

Всё тоже самое, кроме id и addEventListener :

Код в сборе использования "onkeyup" и addeventlistenert.

HTML:

<input id="on_keyup_2">

Javascript

<script>

document.getElementById("on_keyup_2").addEventListener("keyup",function(){

alert("onkeyup используя addEventListener");

});

</script>

Пример использования "onkeyup" и addeventlistenert.

Протестируйте работу "onkeyup" и addeventlistenert.:

Поставьте мышку на поле ввода.

И нажмите любую кнопку и можете немного не отпускать...

Далее отпускаем кнопку и вы увидите срабатывание события "onkeyup"