Encodera

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.

Как реагировать на 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();

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.