У меня есть один текстовый ввод и одна кнопка (см. ниже). Как с помощью JavaScript запустить событие щелчка на кнопке при нажатии клавиши Enter в текстовом поле?
На текущей странице уже есть другая кнопка отправки, поэтому я не могу просто сделать кнопку кнопкой отправки. И я только хочу, чтобы клавиша Enter нажимала эту конкретную кнопку, если она нажата внутри этого одного текстового поля, и ничего больше.
<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
В 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>
Тогда просто закодируйте это!
<input type = "text"
id = "txtSearch"
onkeydown = "if (event.keyCode == 13)
document.getElementById('btnSearch').click()"
/>
<input type = "button"
id = "btnSearch"
value = "Search"
onclick = "doSomething();"
/>
Выяснил это:
<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>
Сделайте кнопку элементом submit, чтобы она работала автоматически.
<input type = "submit"
id = "btnSearch"
value = "Search"
onclick = "return doSomething();"
/>
Обратите внимание, что для этого вам понадобится элемент <form>
, содержащий поля ввода (спасибо Сергею Ильинскому).
Не стоит переопределять стандартное поведение, клавиша Enter всегда должна вызывать кнопку отправки на форме.
Поскольку никто еще не использовал 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 чистым.
Обратите внимание , что, вероятно, стоит убедиться, что это находится за пределами
< form >
, потому что, когда я вложил в них эти элементы, нажав Enter, отправил форму и перезагрузил страницу. Мне потребовалось несколько мгновений, чтобы обнаружить.
Приложение : Благодаря комментарию @ruffin я добавил отсутствующий обработчик событий и «preventDefault», чтобы этот код (предположительно) работал и в форме. (Я перейду к тестированию этого, после чего я удалю содержимое в скобках.)
В простом 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.
Один основной трюк, который вы можете использовать для этого, который я не видел полностью упомянутым. Если вы хотите выполнить действие 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>
Настройка действия = "javascript: void (0);" как это ярлык для предотвращения поведения по умолчанию по существу. В этом случае вызывается метод, нажимаете ли вы ввод или нажимаете кнопку, и выполняется вызов ajax для загрузки некоторых данных.
Попробуй это:
<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>
Чтобы запускать поиск при каждом нажатии клавиши ввода, используйте это:
$(document).keypress(function(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
$('#btnSearch').click();
}
}
onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"
Это просто то, что я имею из несколько недавнего проекта... Я нашел это в сети, и я понятия не имею, есть ли лучший способ или нет в простом старом JavaScript.
keypress
и event.key === "Enter"
с современным JS!const textbox = document.getElementById("txtSearch");
textbox.addEventListener("keypress", function onEvent(event) {
if (event.key === "Enter") {
document.getElementById("btnSearch").click();
}
});
Хотя я почти уверен, что до тех пор, пока в форме есть только одно поле и одна кнопка отправки, нажатие клавиши ввода должно отправить форму, даже если на странице есть другая форма.
Затем вы можете захватить форму при отправке с помощью js и выполнить любую проверку или обратные вызовы, которые вы хотите.
Никто не заметил html-аттабута «ключ доступа», который доступен с некоторых пор.
Это не способ JavaScript для сочетаний клавиш.
Сочетания атрибутов accesskey на MDN
Предназначен для использования таким образом. Самому атрибуту html достаточно, однако мы можем изменить заполнитель или другой индикатор в зависимости от браузера и os. Сценарий - непроверенный подход к царапинам, чтобы дать идею. Возможно, вы захотите использовать детектор библиотеки браузера, такой как крошечный bowser
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
<input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>
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", "Access keys: ALT+SHIFT+Z");
} else if (isWin) {
input.setAttribute("placeholder", "Access keys: ALT+Z");
} else if (isMac) {
input.setAttribute("placeholder", "Access keys: CTRL+ALT+Z");
} else if (isOpera) {
input.setAttribute("placeholder", "Shortcut: SHIFT+ESCAPE->Z");
} else {'Point me to operate...'}
& Лт;!- конец фрагмента - >
В Angular2 :
(keyup.enter)="doSomething()"
Если вам не нужна визуальная обратная связь в кнопке, рекомендуется не ссылаться на кнопку, а напрямую вызывать контроллер.
Кроме того, идентификатор не нужен - еще один способ разделения NG2 между видом и моделью.
Это решение для всех YUI любителей там:
Y.on('keydown', function() {
if(event.keyCode == 13){
Y.one("#id_of_button").simulate("click");
}
}, '#id_of_textbox');
В этом особом случае у меня были лучшие результаты при использовании YUI для запуска объектов DOM, которым была введена функция кнопок, но это уже другая история...
Эта попытка обмен близка, но плохо ведет себя по отношению к браузеру назад, а затем вперед (на Safari 4.0.5 и Firefox 3.6.3), поэтому в конечном итоге я бы не рекомендовал ее.
<input type="text" id="txtSearch" onchange="doSomething();" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
Этот случай, который вы хотите, также можно отправить кнопкой ввода из публикации на сервер и выполнить сценарий 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 mobile мне пришлось сделать
$('#id_of_textbox').live("keyup", function(event) {
if(event.keyCode == '13'){
$('#id_of_button').click();
}
});
Чтобы добавить совершенно простое решение JavaScript, которое решает проблему @icedwater с отправкой формы, вот полное решение с form
.
ПРИМЕЧАНИЕ: Это для «современных браузеров», включая IE9 +. Версия IE8 не намного сложнее и может быть обучена здесь.
& Лт; hr >
Скрипка:
<body>
<form>
<input type="text" id="txt" />
<input type="button" id="go" value="Click Me!" />
<div id="outige"></div>
</form>
</body>
// 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 />";
}
});
}
});