Запускайте нажатие кнопки с помощью JavaScript на клавише Enter в текстовом поле
У меня есть один ввод текста и одна кнопка (см. Ниже). Как я могу использовать JavaScript для вызвать событие нажатия кнопки, когда клавиша Enter нажата внутри текстового поля?
На моей текущей странице уже есть другая кнопка отправки, поэтому я не могу просто сделать ее кнопкой отправки. И я, Только, хочу, чтобы клавиша Enter нажимала эту конкретную кнопку, если она нажата из этого одного текстового поля, и ничего больше.
<input type = "text" id = "txtSearch" />
<input type = "button" id = "btnSearch" value = "Search" onclick = "doSomething();" />
@JoshuaDance, уже иметь форму / отправить - не проблема. Страница может иметь множество форм (но не вложенных), каждая из которых имеет собственное представление. Каждое поле каждой формы будет запускать только отправку этой формы. Как заявил этот ответ.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 30
Сделайте кнопку элементом отправки, чтобы она работала автоматически.
<input type = "submit"
id = "btnSearch"
value = "Search"
onclick = "return doSomething();"
/>
Обратите внимание, что для этой работы вам понадобится элемент <form>, содержащий поля ввода (спасибо Сергею Ильинскому).
Не рекомендуется переопределять стандартное поведение, клавиша Enter всегда должна вызывать кнопку отправки в форме.
Чуваки! Прочтите весь его вопрос. На странице уже есть другая кнопка отправки, поэтому для него это не сработает.
Интересный факт, недавно я попытался сделать это в SharePoint. Однако в SharePoint уже есть форма, охватывающая весь ваш контент, и любые теги <form> выбрасываются либеральным анализатором HTML. Так что мне нужно угнать нажатия клавиш или перебрать. (Кстати, нажатие Enter в SharePoint по какой-то причине запускает режим редактирования. Думаю, на ленте используется та же форма.)
<button type = "submit" onclick = "return doSomething(this)">Value</button> работает до. Подсказка кроется в ключевом слове return.
@skybondsor - OTOH, как упомянул Гарроу, OP было неверный, когда он заявил об этом ограничении. Вполне возможно иметь несколько форм на одной странице: просто нужно обернуть элемент внутри его собственной формы и убедиться, что это не внутри другая форма на странице.
@ToolmakerSteve Конечно! Но мы оба можем согласиться с тем, что из первоначального вопроса было неясно, возможны ли множественные формы. Еще одна веская причина опубликовать как можно больше кода.
В jQuery будет работать следующее:
$("#id_of_textbox").keyup(function(event) {
if (event.keyCode === 13) {
$("#id_of_button").click();
}
});
$("#pw").keyup(function(event) {
if (event.keyCode === 13) {
$("#myButton").click();
}
});
$("#myButton").click(function() {
alert("Button code executed.");
});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Username:<input id = "username" type = "text"><br>
Password: <input id = "pw" type = "password"><br>
<button id = "myButton">Submit</button>Или в простом JavaScript, будет работать следующее:
document.getElementById("id_of_textbox")
.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById("id_of_button").click();
}
});
document.getElementById("pw")
.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById("myButton").click();
}
});
function buttonCode()
{
alert("Button code executed.");
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Username:<input id = "username" type = "text"><br>
Password: <input id = "pw" type = "password"><br>
<button id = "myButton" onclick = "buttonCode()">Submit</button>Вероятно, лучше запросить event.which, чем event.keyCode или event.charCode, см. developer.mozilla.org/en/DOM/event.charCode#Notes
@William: Поскольку он использует keyup, а в вашей ссылке указано «charCode никогда не устанавливается в событиях keydown и keyup. В этих случаях вместо него устанавливается keyCode»., это не имеет значения. Тем не менее, я не думаю, что keyup является подходящим событием для работы (keydown, я бы подумал; например, так ведет себя кнопка, когда она находится в фокусе).
keydown, а не keyup - лучший вариант для использования. Кроме того, если вы используете asp.net, вам нужно будет установить return false в конце, чтобы asp.net не перехватил событие.
Проблема с использованием keydown заключается в том, что нажатие клавиши Enter будет запускать событие снова и снова. если вы присоединитесь к событию keyup, оно сработает только после отпускания клавиши.
$(this).click(); выглядит лучше и может работать с селекторами, которые соответствуют более чем одному элементу (например, $('.buttons')).
Я использовал $ inputs = $ ('# foo, # bar'); $ inputs.on ('keydown', ...) и $ inputs.off ('keydown') при получении события, чтобы предотвратить автоповтор, и вернуть false, чтобы предотвратить срабатывание неправильной кнопки.
Я настроил ваш код, добавив event.preventDefault(); перед вызовом функции click();, в то время как моя страница имеет форму, и я переключил keyup на keypress, так как это был единственный рабочий обработчик для меня, в любом случае, спасибо за аккуратный фрагмент кода!
Это работает для ff, chrome, т.е. в приложении asp.net, если вы измените его на keydown и добавите event.preventDefault () перед событием click (). Ненавижу, что приложение asp.net webforms так чувствительно к подобной чуши.
@Hugo Вы не можете использовать $(this), потому что родительский идентификатор - это идентификатор текстового поля, а тот, который вы хотите использовать для click(), - это идентификатор кнопки.
Почему люди так ненавидят jQuery? Есть ли конкретная причина не поощрять использование jQuery?
Честно говоря, когда этот ответ был опубликован, jQuery был в значительной степени синонимом JS. Но теперь многие из нас, кто вообще избегает jQuery (потому что это просто пустая трата килобайт, когда вы используете что-то вроде React), раздражаются, когда мы ищем ответы на вопросы JS, и часто первое, что приходит на ум, - это библиотека, которую мы не используем. Не хочу зависеть от.
Не лучший ответ, особенно сегодня. Так что я спустил это и поднял лучше. Не уверен, почему я потерял репутацию из-за этого.
@sohaiby: если бы OP использовал jquery, он бы об этом спросил. И если он не использовал jquery, предположив, что это излишне для такой простой задачи. Это то же самое, что спросить, как объединить строки в C++, и получить ответ об использовании Qt QString. Технически верно, но не то, о чем спрашивал.
Используйте key вместо keyCode. Последний не рекомендуется.
@jweaks Голосование за понижение оплачивается представителем, чтобы предотвратить злоупотребления. Вы должны быть уверены, что считаете вопрос или ответ вредным для сайта или пользователей, прежде чем использовать его.
как это будет работать для нескольких текстовых полей или полей выбора?
@Codenewbie - вы помещаете идентификатор в каждое поле (каждый элемент). Затем вы копируете код один раз для каждого элемента, изменяя id_of_textbox и id_of_button по желанию.
Выяснил это:
<input type = "text" id = "txtSearch" onkeypress = "return searchKeyPress(event);" />
<input type = "button" id = "btnSearch" Value = "Search" onclick = "doSomething();" />
<script>
function searchKeyPress(e)
{
// look for window.event in case event isn't passed in
e = e || window.event;
if (e.keyCode == 13)
{
document.getElementById('btnSearch').click();
return false;
}
return true;
}
</script>
е = е || window.event; // кратчайший способ получить событие
Лучший вариант простого JavaScript. Добавленный JavaScript в качестве атрибута в HTML занимает много места, а jQuery - это просто jQuery (совместимость не гарантируется). Спасибо за решение!
и если вы вернете false внутри if, вы можете избежать дальнейшей обработки ключа: <input type = "text" id = "txtSearch" onkeypress = "searchKeyPress (event);" /> <input type = "button" id = "btnSearch" Value = "Search" onclick = "doSomething ();" /> <script> function searchKeyPress (e) {// ищем window.event, если событие не передано в e = e || window.event; если (e.keyCode == 13) {document.getElementById ('btnSearch'). click (); вернуть ложь; } вернуть истину; } </script>
Тогда просто введите код!
<input type = "text"
id = "txtSearch"
onkeydown = "if (event.keyCode == 13)
document.getElementById('btnSearch').click()"
/>
<input type = "button"
id = "btnSearch"
value = "Search"
onclick = "doSomething();"
/>
Да, я почти это сделал. Думаю, это просто личные предпочтения ... Мне нравится более модульный подход. ;)
если вам нужно остановить отправку формы: onkeydown = "if (event.keyCode == 13) {document.getElementById ('btnSubmit'). click (); event.returnVa lue = false; event.canc el = true ;} "
А как насчет кроссбраузерной совместимости? Работает ли он во всех распространенных браузерах? (Я считаю IE6 обычным браузером, так как в нем по-прежнему используется более 5% браузеров во всем мире)
Это сработало для меня из-за того, что встроенный метод вместо вызова функции с аналогичным кодом в нем позволяет вам возвращать false при вызове и избегать обратной передачи. В моем случае метод «click» вызывает асинхронный вызов __doPostback и без «return false;» просто перезагрузит страницу.
@TimothyChung: Большое спасибо. Остальная часть этой страницы великолепна, но я попал сюда через Google, пытаясь выяснить, как удержать «Enter» в текстовом поле от запуска обратной передачи без с помощью <form> (который, похоже, не работает внутри asp : UpdatePanel). Это работает. (И это можно сделать внутри функции javascript, такой как kdenney, и, возможно, в JQuery.)
Я согласен с Сэмом, этот код с этим встроенным JS-кодом чертовски уродлив. Вы всегда должны разделять коды HTML и JavaScript.
Пришлось изменить onkeydown на onkeypress, чтобы он работал в Chrome.
@Sam Никогда не получай свой мудрость от марионеток. Боль ведет к страх, а страх убивает разум. Страх - это маленькая смерть, приносящая полное уничтожение. Я столкнусь со своим страхом. Я позволю ему пройти через меня и через меня. И когда он пройдет, я обращу внутренний взор, чтобы увидеть его путь. Где страх прошел там ничего не будет. За исключением, возможно, встроенных обработчиков событий. Итак, да, пожалуйста, отделите обработчики событий от вашего представления / разметки, как этот ответ. ; ^)
onkeydown = "javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"
Это просто кое-что из недавнего проекта ... Я нашел это в сети и понятия не имею, есть ли лучший способ в простом старом JavaScript.
Хотя я почти уверен, что до тех пор, пока в форме есть только одно поле и одна кнопка отправки, нажатие Enter должно отправить форму, даже если на странице есть другая форма.
Затем вы можете захватить форму при отправке с помощью js и выполнить любую проверку или обратные вызовы, которые вы хотите.
event.returnValue = false
Используйте его при обработке события или в функции, которую вызывает обработчик событий.
По крайней мере, он работает в Internet Explorer и Opera.
Эта попытка по изменению близка, но ведет себя неправильно по отношению к браузеру в прошлом (в Safari 4.0.5 и Firefox 3.6.3), поэтому в конечном итоге я бы не рекомендовал ее.
<input type = "text" id = "txtSearch" onchange = "doSomething();" />
<input type = "button" id = "btnSearch" value = "Search" onclick = "doSomething();" />
Следует также упомянуть, что он срабатывает при расфокусировке.
В простом JavaScript
if (document.layers) {
document.captureEvents(Event.KEYDOWN);
}
document.onkeydown = function (evt) {
var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
if (keyCode == 13) {
// For Enter.
// Your function here.
}
if (keyCode == 27) {
// For Escape.
// Your function here.
} else {
return true;
}
};
Я заметил, что ответ дается только в jQuery, поэтому я подумал также дать что-то на простом JavaScript.
document.layers? Вы все еще поддерживаете Netscape? !!
Нет, вам не нужно поддерживать Netscape. blog.netscape.com/2007/12/28/…
netscape.com больше не существует (он перенаправляет на aol.com), но все же есть люди, поддерживающие nescape, удивительно.
evt.which ? evt.which : evt.keyCode невероятно похож на evt.which || evt.keyCode
@LeartS Могу поспорить, это потому, что все еще есть люди с использованием Netscape.
Я не понимаю, почему вы проверяете наличие функции layers, чтобы активировать захват Event.KEYDOWN. Какое отношение эти вещи имеют друг к другу? Вместо этого проверьте if (Event.KEYDOWN)!
Это также может помочь, небольшая функция JavaScript, которая отлично работает:
<script type = "text/javascript">
function blank(a) { if (a.value == a.defaultValue) a.value = ""; }
function unblank(a) { if (a.value == "") a.value = a.defaultValue; }
</script>
<input type = "text" value = "email goes here" onfocus = "blank(this)" onblur = "unblank(this)" />
Я знаю, что этот вопрос решен, но я только что нашел кое-что, что может быть полезно другим.
Вопрос заключался в том, чтобы вызвать нажатие кнопки с помощью клавиши ввода в текстовом поле. Ваше решение предназначено для функциональности типа «водяной знак».
Чтобы запускать поиск каждый раз при нажатии клавиши ввода, используйте это:
$(document).keypress(function(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
$('#btnSearch').click();
}
}
Для jQuery mobile мне пришлось сделать:
$('#id_of_textbox').live("keyup", function(event) {
if (event.keyCode == '13'){
$('#id_of_button').click();
}
});
.live устарел в jQuery 1.7. Считается ли это нормальным в jQuery Mobile?
Это решение для всех любителей Юй:
Y.on('keydown', function() {
if (event.keyCode == 13){
Y.one("#id_of_button").simulate("click");
}
}, '#id_of_textbox');
В этом частном случае у меня были лучшие результаты, используя YUI для запуска объектов DOM, которые были введены с функциональностью кнопок - но это уже другая история ...
Для этого можно использовать один базовый прием, о котором я еще не упоминал. Если вы хотите выполнить действие ajax или другую работу с Enter, но не хотите отправлять форму, вы можете сделать это:
<form onsubmit = "Search();" action = "javascript:void(0);">
<input type = "text" id = "searchCriteria" placeholder = "Search Criteria"/>
<input type = "button" onclick = "Search();" value = "Search" id = "searchBtn"/>
</form>
Установка action = "javascript: void (0);" как будто это ярлык для предотвращения поведения по умолчанию. В этом случае метод вызывается независимо от того, нажимаете ли вы клавишу ввода или нажимаете кнопку, и выполняется вызов ajax для загрузки некоторых данных.
Это лучшее решение для поддержки мобильных устройств. Он автоматически скрывает клавиатуру на устройствах Android, а также iOS, если вы добавляете searchCriteria.blur(); к onsubmit.
Это не сработает, поскольку на странице уже есть другая кнопка отправки.
@ JoseGómez, на странице может быть столько кнопок отправки, сколько желает разработчик, и они будут запускаться только соответствующими полями. Достаточно иметь отдельные формы для каждой группы полей / отправки. Страница не ограничивается одной формой.
@Frederic: из вопроса я (неправильно?) Понял, что другая кнопка отправки была в той же форме: «На моей текущей странице уже есть другая кнопка отправки, поэтому я не могу просто сделать ее кнопкой отправки».
@ JoseGómez, вопрос не требует хранить все в единой форме. Многие разработчики игнорируют, что они могут разместить множество форм на одной странице. То, как ОП написал причину своей проблемы, предполагает, что он может быть в этом случае. Например, многие разработчики веб-форм .Net считают, что html ограничен одной формой на странице, поскольку веб-форма .Net ограничена таким образом. Но это действительно не ограничение HTML.
Это отличный ответ, поскольку он позволяет настраивать действия, но при этом избегает необходимости в кучке причудливого кода переопределения.
Поскольку addEventListener еще никто не использовал, вот моя версия. Учитывая элементы:
<input type = "text" id = "txt" />
<input type = "button" id = "go" />
Я бы использовал следующее:
var go = document.getElementById("go");
var txt = document.getElementById("txt");
txt.addEventListener("keypress", function(event) {
event.preventDefault();
if (event.keyCode == 13)
go.click();
});
Это позволяет вам изменять тип события и действие отдельно, сохраняя при этом чистый HTML.
Note that it's probably worthwhile to make sure this is outside of a
<form>because when I enclosed these elements in them pressing Enter submitted the form and reloaded the page. Took me a few blinks to discover.Addendum: Thanks to a comment by @ruffin, I've added the missing event handler and a
preventDefaultto allow this code to (presumably) work inside a form as well. (I will get around to testing this, at which point I will remove the bracketed content.)
Я действительно не понимаю, почему ответ JQuery получил больше голосов. Я плачу за сообщество веб-разработчиков.
Все, что вам действительно не хватает, - это аргумент в обработчике нажатия клавиш и e.preventDefault(), чтобы заставить его работать с формами. См. мой (новый) ответ.
если вы не собираетесь, чтобы ваши пользователи фактически вводили какие-либо данные, вам действительно следует сделать что-то вроде if (event.keyCode == 13) { event.preventDefault(); go.click();}
Использование jQuery только для этой крошечной штуки совершенно бесполезно. Он также легко работает с CSP и требует меньше времени для загрузки. Если можете, используйте это.
document.onkeypress = function (e) {
e = e || window.event;
var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
if (charCode == 13) {
// Do something here
printResult();
}
};
Вот мои два цента. Я работаю над приложением для Windows 8 и хочу, чтобы кнопка регистрировала событие щелчка, когда я нажимаю кнопку Enter. Я делаю это на JS. Я попробовал несколько предложений, но возникли проблемы. Это прекрасно работает.
Какое-то излишество размещения обработчика событий в документе. Если у вас где-то еще был charCode из 13, вы стреляете из printResult().
Попробуй это:
<input type = "text" id = "txtSearch"/>
<input type = "button" id = "btnSearch" Value = "Search"/>
<script>
window.onload = function() {
document.getElementById('txtSearch').onkeypress = function searchKeyPress(event) {
if (event.keyCode == 13) {
document.getElementById('btnSearch').click();
}
};
document.getElementById('btnSearch').onclick =doSomething;
}
</script>
В этом случае вы также хотите отключить кнопку ввода для отправки на сервер и выполнить сценарий Js.
<input type = "text" id = "txtSearch" onkeydown = "if (event.keyCode == 13)
{document.getElementById('btnSearch').click(); return false;}"/>
<input type = "button" id = "btnSearch" value = "Search" onclick = "doSomething();" />
Чтобы сделать это с помощью jQuery:
$("#txtSearch").on("keyup", function (event) {
if (event.keyCode==13) {
$("#btnSearch").get(0).click();
}
});
Чтобы сделать это с помощью обычного JavaScript:
document.getElementById("txtSearch").addEventListener("keyup", function (event) {
if (event.keyCode==13) {
document.getElementById("#btnSearch").click();
}
});
В Угловой2:
(keyup.enter) = "doSomething()"
Если вам не нужна визуальная обратная связь на кнопке, рекомендуется не ссылаться на кнопку, а напрямую вызывать контроллер.
Кроме того, идентификатор не нужен - еще один способ разделения представления и модели в NG2.
Вот вопрос о дополнительной информации о параметрах клавиатуры: stackoverflow.com/q/32155887/435605
Чтобы добавить полностью простое решение JavaScript, адресованное Проблема @ icedwater с отправкой формы, вот полное решение с form.
NOTE: This is for "modern browsers", including IE9+. The IE8 version isn't much more complicated, and can be learned here.
Рабочий пример: https://jsfiddle.net/rufwork/gm6h25th/1/
HTML
<body>
<form>
<input type = "text" id = "txt" />
<input type = "button" id = "go" value = "Click Me!" />
<div id = "outige"></div>
</form>
</body>
JavaScript
// The document.addEventListener replicates $(document).ready() for
// modern browsers (including IE9+), and is slightly more robust than `onload`.
// More here: https://stackoverflow.com/a/21814964/1028230
document.addEventListener("DOMContentLoaded", function() {
var go = document.getElementById("go"),
txt = document.getElementById("txt"),
outige = document.getElementById("outige");
// Note that jQuery handles "empty" selections "for free".
// Since we're plain JavaScripting it, we need to make sure this DOM exists first.
if (txt && go) {
txt.addEventListener("keypress", function (e) {
if (event.keyCode === 13) {
go.click();
e.preventDefault(); // <<< Most important missing piece from icedwater
}
});
go.addEventListener("click", function () {
if (outige) {
outige.innerHTML += "Clicked!<br />";
}
});
}
});
Никто не заметил "ключ доступа" html-атрибута, который доступен с некоторого времени.
Это не javascript способ сочетания клавиш.
Ярлыки атрибутов accesskey на MDN
Предназначен для использования вот так. Достаточно самого атрибута html, однако мы можем изменить заполнитель или другой индикатор в зависимости от браузера и ОС. Сценарий представляет собой непроверенный метод, позволяющий дать представление. Вы можете использовать детектор библиотеки браузера, такой как крошечный топливозаправщик
let client = navigator.userAgent.toLowerCase(),
isLinux = client.indexOf("linux") > -1,
isWin = client.indexOf("windows") > -1,
isMac = client.indexOf("apple") > -1,
isFirefox = client.indexOf("firefox") > -1,
isWebkit = client.indexOf("webkit") > -1,
isOpera = client.indexOf("opera") > -1,
input = document.getElementById('guestInput');
if (isFirefox) {
input.setAttribute("placeholder", "ALT+SHIFT+Z");
} else if (isWin) {
input.setAttribute("placeholder", "ALT+Z");
} else if (isMac) {
input.setAttribute("placeholder", "CTRL+ALT+Z");
} else if (isOpera) {
input.setAttribute("placeholder", "SHIFT+ESCAPE->Z");
} else {'Point me to operate...'}<input type = "text" id = "guestInput" accesskey = "z" placeholder = "Acces shortcut:"></input>Кажется, не отвечает на вопрос OP о частном случае key = ENTER
Этот ответ неправильно понимает ключ доступа, который является способом иметь клавишу фокус на элементе - после нажатия клавиши доступа к текстовой области можно было начать вводить в нее. OP просит совсем другое: способ отправить содержимое текущего элемента.
Для тех, кому нравится лаконичность и современный js-подход.
input.addEventListener('keydown', (e) => {if (e.keyCode == 13) doSomething()});
где Вход - переменная, содержащая ваш элемент ввода.
Используйте keypress и event.key === "Enter" с современным JS!
const textbox = document.getElementById("txtSearch");
textbox.addEventListener("keypress", function onEvent(event) {
if (event.key === "Enter") {
document.getElementById("btnSearch").click();
}
});
В jQuery вы можете использовать event.which==13. Если у вас есть form, вы можете использовать $('#formid').submit() (с правильными прослушивателями событий, добавленными к отправке указанной формы).
$('#textfield').keyup(function(event){
if (event.which==13){
$('#submit').click();
}
});
$('#submit').click(function(e){
if ($('#textfield').val().trim().length){
alert("Submitted!");
} else {
alert("Field can not be empty!");
}
});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for = "textfield">
Enter Text:</label>
<input id = "textfield" type = "text">
<button id = "submit">
Submit
</button>В современном, устаревшем (без keyCode или onkeydown) Javascript:
<input onkeypress = "if (event.key == 'Enter') {console.info('Test')}">
На мой взгляд, это самый простой ответ, который работает. В моем случае использования я обновил его до onkeypress = "inputKeyPressed (event)", а затем обработал параметр event.which в самой функции. Например, клавиша Enter возвращает событие, которое равно 13.
Я разработал собственный javascript для достижения этой функции, просто добавив класс
Пример: <button type = "button" class = "ctrl-p">Custom Print</button>
Вот Проверьте это Скрипка
- или -
проверить работающий пример
https://stackoverflow.com/a/58010042/6631280
Note: on current logic, you need to press Ctrl + Enter
Для современного JS keyCode устарел, используйте вместо него key.
searchInput.onkeyup = function (e) {
if (e.key === 'Enter') {
searchBtn.click();
}
}
Коротко работающий чистый JS
txtSearch.onkeydown= e => (e.key= = "Enter") ? btnSearch.click() : 1
txtSearch.onkeydown= e => (e.key= = "Enter") ? btnSearch.click() : 1
function doSomething() {
console.info('?');
}<input type = "text" id = "txtSearch" />
<input type = "button" id = "btnSearch" value = "Search" onclick = "doSomething();" />В этот день мероприятие change - это путь!
document.getElementById("txtSearch").addEventListener('change',
() => document.getElementById("btnSearch").click()
);
События изменения срабатывают, когда пользователь фиксирует изменение значения в элементе управления формы. Это можно сделать, например, щелкнув за пределами элемента управления или с помощью клавиши Tab для переключения на другой элемент управления. MDN Я думаю, что многие люди не стал бы хотят такого поведения ...
Важное примечание для новичков, таких как я: ключевая часть этого вопроса заключается в том, есть ли у вас уже форма на странице, поэтому у вас уже есть кнопка отправки. Ответ jQuery совместим с кросс-браузером и является хорошим решением.