Как использовать ввод с клавиатуры в JavaScript?

Использование prompt() для пользовательского ввода

Функция prompt() — один из самых простых способов получить пользовательский ввод в JavaScript. Эта встроенная функция открывает диалоговое окно, в котором пользователь может что-то ввести, а значение возвращается в виде строки.

Синтаксис

let userInput = prompt("Введите текст:");
 JavaScript let userName = prompt("What is your name?");

if (userName) {
    alert("Hello, " + userName + "!");
} else {
    alert("No name entered.");
}

Использование прослушивателей событий для ввода с клавиатуры

Для более сложных сценариев, таких как обнаружение ввода в реальном времени или обработка определенных клавиш, вы можете использовать систему обработки событий JavaScript. Прослушивая события клавиатуры (keydown, keypress, keyup), вы можете захватывать ввод, когда пользователь взаимодействует с клавиатурой.

Keydown Event

Событие keydown происходит при нажатии клавиши и охватывает все типы клавиш, включая специальные клавиши, такие как Esc, Enter и клавиши со стрелками.

 JavaScript document.addEventListener('keydown', function(event) {
    console.log('Key pressed: ' + event.key);
});

keypress Event

Событие keypress срабатывает при нажатии клавиши с символом, т. е. при вводе печатного символа, например букв, цифр или символов. Оно не срабатывает для непечатных клавиш, например Shift, Ctrl или Arrow.

 JavaScript document.addEventListener('keypress', function(event) {
    console.log('Key pressed: ' + event.key);
});

keyup Event

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

 JavaScript document.addEventListener('keyup', function(event) {
    console.log('Key released: ' + event.key);
});

Прием входных данных от элементов формы

Во многих случаях, особенно при создании форм или панелей поиска, вам захочется захватывать ввод с клавиатуры непосредственно из поля ввода или текстовой области. Это можно сделать, обратившись к свойству value элементов формы.

 HTML <script>
    document.getElementById('myInput').addEventListener('input', function() {
        console.log('Current input value: ' + this.value);
    });
</script>

<input type="text" id="myInput" placeholder="Type something here">

Ввод с клавиатуры в JavaScript