Как реагировать на Enter и другие клавиши
Короткий ответ
Событие keydown срабатывает при нажатии клавиши. В event.key хранится её название:
<input id="message" placeholder="Type and press Enter">
<p id="out"></p>
<script>
document.getElementById('message').addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
document.getElementById('out').textContent = 'Sent: ' + event.target.value;
event.target.value = '';
}
});
</script>Сочетания клавиш
Свойства ctrlKey, shiftKey, altKey и metaKey сообщают, какие клавиши-модификаторы зажаты:
document.addEventListener('keydown', (event) => {
if ((event.ctrlKey || event.metaKey) && event.key === 's') {
event.preventDefault();
saveDocument();
}
});Enter в многострочном поле
В чате Enter обычно отправляет сообщение, а Shift+Enter переносит строку:
textarea.addEventListener('keydown', (event) => {
if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault();
sendMessage(textarea.value);
}
});Частая ошибка
Старые свойства keyCode и which устарели. Используйте event.key для символов и event.code для физического положения клавиши.
// outdated
if (event.keyCode === 13) send();
// modern
if (event.key === 'Enter') send();