Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Событие нажатия кнопки клавиатуры по блоку

Поддержи проект!!! smile

onkeydown javascript или "Событие нажатия кнопки клавиатуры по блоку ", сколько способов существует определить/отследить нажатие кнопки клавиатуры по блоку/элементу Dom-а в javascript.

Подробно о "onkeydown Event"

  1. Использование "onkeydown" внутри тега.
  2. Использование onkeydown + function
  3. Пример использования keydown + addEventListener
  1. Использование "onkeydown" внутри тега.

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

    Для того, чтобы продемонстрировать использование "onkeydown" нам понадобится элемент Dom - пусть это будет div, и добавим ему class="onkeydown" :

    Также туда добавим событие "onkeydown" с функцией myFunction:

    <div onkeydown="myFunction(event)" class="onkeydown"></div>
    Css:

    Немного стилей для нашего блока:

    .onkeydown{
    background: #e9e9e9;
    width: 300px;
    height: 100px;
    margin: auto;
    border: 1px solid;
    }
    javascript

    Напишем нашу функцию:

    <script>
    function myFunction() {
    document.getElementById("demo").innerHTML = "Вы нажали на кнопку клавиатуры";
    }
    </script>

    Результат использования onkeydown в теге:

    Будем передавать - пусть это будет текст в отдельный div "Получаем".

    Установите курсор мыши на поле ввода и нажмите любую кнопку клавиатуры:

    Получаем

  2. Использование onkeydown + function

    Второй способ использования onkeydown равно function.

    Нам опять понадобится div, внутрь добавим id, чтобы обратиться к тегу

    <div id="theDIV" class="onkeydown"></div>

    В абзац "p" будем передавать полученные данные:

    <p id="demo_1"></p>

    Стили повторять не буду - см. выше.

    Соберем скрипт:

    <script>

    document.getElementById("theDIV").onkeydown = function(e) {

    document.getElementById("demo_1").innerHTML = "Вы нажали на кнопку клавиатуры";

    };

    </script>

    Результат onkeydown + function

    Установите курсор мыши на поле ввода и нажмите любую кнопку клавиатуры:

    Получаем

  3. Пример использования keydown + addEventListener

    Следующий вариант использования onkeydown, аналогичен первому, только здесь будем использовать keydown + "addEventListener":

    Html:

    <div id="theDIV_2" class="onkeydown"></div>

    <p id="demo_2"></p>

    Css:

    Аналогичные первому пункту.

    javascript

    <script>

    document.getElementById("theDIV_2").addEventListener("keydown", function(e) {

    document.getElementById("demo_2").innerHTML = "Вы нажали на кнопку клавиатуры";

    });

    </script>

    Результат onkeydown + addEventListener

    Установите курсор мыши на поле ввода и нажмите любую кнопку клавиатуры:

    Получаем


Вас может еще заинтересовать список тем : #JS | #KEYBOARD |
Последняя дата редактирования : 08.02.2021 11:23
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
onkeydown js onkeydown document onkeydown событие onkeydown onkeydown event onkeydown javascript что означает событие onkeydown



Построение гравиков
Последние комментарии :
Марат :
08/02/2021 02:50
Всегда пожалуйста приходите ещё!
подробнее.
Павел :
08/02/2021 11:11
Спасибо большое. Очень поучительно.
подробнее.
Марат :
03/02/2021 07:22
03/02/2021Тестирование и разработка Comments+1.5 отложена на неопределенное…
подробнее.
Марат :
31/01/2021 08:31
Всегда пожалуйста!Рад, что помог!
подробнее.
Bambr :
31/01/2021 07:34
Огромное спасибо! )
подробнее.

'; ';