Как запустить нажатие кнопки через JavaScript при нажатии Enter в текстовом поле

Оффтоп javascript
1

Проблема с обработкой Enter в input поле

У меня есть текстовое поле для ввода и обычная кнопка. Мне нужно сделать так, чтобы при нажатии клавиши Enter в этом поле автоматически срабатывала кнопка.

Особенности моей ситуации:

  • На странице уже есть другая submit кнопка, поэтому я не могу просто изменить тип кнопки
  • Enter должен работать только когда фокус находится именно в этом текстовом поле
  • Нужно программно вызвать событие click для конкретной кнопки
<input type="text" id="userInput" />
<input type="button" id="searchBtn" value="Найти" onclick="performSearch();" />

Какой JavaScript код поможет реализовать такое поведение? Пробовал разные варианты с addEventListener, но не получается правильно настроить.

2

а можно еще проще - повесь onkeypress прямо в html. типа <input type="text" onkeypress="if(event.which==13) document.getElementById('searchBtn').click()" /> - отлично работает, сам так делаю когда надо быстро добавить. да, event.which устаревший, но в большинстве браузеров до сих пор пашет

3

Для решения проблемы добавь обработчик события keydown на текстовое поле. Проверь, если нажата клавиша Enter, и вызывай событие click для кнопки:

var input = document.getElementById('userInput');
input.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
        document.getElementById('searchBtn').click();
    }
});

Этот код будет работать только когда фокус находится в поле ввода.

4

Добавь event.preventDefault() для Enter - иначе форма может случайно отправиться. И лучше используй event.code === ‘Enter’ вместо key, работает надежнее с разными раскладками. У кнопки уже есть onclick?