Запускаем нажатие кнопки с помощью JavaScript на клавишу Enter в текстовом поле
-
03-07-2019 - |
Вопрос
У меня есть один текстовый ввод и одна кнопка (см. Ниже).Как я могу использовать JavaScript для запускает событие нажатия кнопки когда Войти клавиша нажата внутри текстового поля?
На моей текущей странице уже есть другая кнопка отправки, поэтому я не могу просто сделать эту кнопку кнопкой отправки.И, я Только хотите, чтобы Войти клавиша для нажатия этой конкретной кнопки, если она нажата из этого текстового поля, и больше ничего.
<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>
Сделайте кнопку элементом отправки, чтобы это было автоматически.
<input type = "submit"
id = "btnSearch"
value = "Search"
onclick = "return doSomething();"
/>
Обратите внимание, что вам понадобится <form>
элемент, содержащий поля ввода, чтобы заставить это работать (спасибо Сергею Ильинскому).
Это не очень хорошая практика - переопределять стандартное поведение, Войти клавиша всегда должна вызывать кнопку отправки в форме.
Поскольку никто не пользовался 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>
Установка action="javascript: void(0);", как будто это ярлык для предотвращения поведения по умолчанию по существу.В этом случае вызывается метод независимо от того, нажимаете ли вы enter или кнопку, и выполняется вызов 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>
Чтобы запускать поиск каждый раз при нажатии клавиши enter, используйте это:
$(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.
Хотя я почти уверен, что пока в форме есть только одно поле и одна кнопка отправки, нажатие enter должно отправить форму, даже если на странице есть другая форма.
Затем вы можете захватить форму onsubmit с помощью js и выполнить любую проверку или обратные вызовы, которые вы хотите.
Это решение для всех ЮИ любовники где-то там:
Y.on('keydown', function() {
if(event.keyCode == 13){
Y.one("#id_of_button").simulate("click");
}
}, '#id_of_textbox');
В этом особом случае я добился лучших результатов, используя YUI для запуска DOM-объектов, которые были снабжены функциональностью кнопок, но это уже другая история...
В Угловой 2:
(keyup.enter)="doSomething()"
Если вы не хотите какой-либо визуальной обратной связи с кнопкой, было бы неплохо не ссылаться на кнопку, а напрямую вызывать контроллер.
Кроме того, идентификатор не нужен - еще один способ NG2 разделения между представлением и моделью.
Никто не заметил html-атрибут "accesskey", который доступен с некоторого времени.
Это не javascript-способ получения сочетаний клавиш.
Клавиша доступа присваивает ярлыки MDN
Предназначен для использования вот так.Самого атрибута html достаточно, однако мы можем изменить заполнитель или другой индикатор в зависимости от браузера и операционной системы.Сценарий представляет собой непроверенный с нуля подход, дающий представление.Возможно, вы захотите использовать детектор библиотек браузера, такой как tiny боузер
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...'}
<input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>
Использование keypress
и event.key === "Enter"
с современным JS!
const textbox = document.getElementById("txtSearch");
textbox.addEventListener("keypress", function onEvent(event) {
if (event.key === "Enter") {
document.getElementById("btnSearch").click();
}
});
Это при обмене попытка близка, но ведет себя неправильно по отношению к браузеру назад, а затем вперед (в Safari 4.0.5 и Firefox 3.6.3), поэтому, в конечном счете, я бы не рекомендовал это.
<input type="text" id="txtSearch" onchange="doSomething();" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
Это на случай, если вы также захотите отключить кнопку enter от отправки на сервер и выполнить 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();" />
event.returnValue = false
Используйте его при обработке события или в функции, которую вызывает ваш обработчик событий.
По крайней мере, это работает в Internet Explorer и Opera.
Для jquery mobile я должен был сделать
$('#id_of_textbox').live("keyup", function(event) {
if(event.keyCode == '13'){
$('#id_of_button').click();
}
});
Чтобы добавить полностью простое решение на JavaScript, которое адресовано Проблема @icedwater с отправкой формы, вот полное решение с form
.
ПРИМЕЧАНИЕ: Это для "современных браузеров", включая IE9+.Версия IE8 не намного сложнее и может быть научился здесь.
Скрипка: 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 />";
}
});
}
});
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.Я попробовал пару предложений, но возникли проблемы.Это работает просто отлично.
Чтобы сделать это с помощью 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();
}
});
В современном, не подлежащем осуждению виде (без keyCode
или onkeydown
) Javascript:
<input onkeypress="if(event.key == 'Enter') {console.log('Test')}">
Для тех, кому может понравиться краткость и современный подход к js.
input.addEventListener('keydown', (e) => {if (e.keyCode == 13) doSomething()});
где входные данные это переменная, содержащая ваш входной элемент.
В 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>
Это также может помочь, небольшая функция 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)" />
Я знаю, что этот вопрос решен, но я только что нашел кое-что, что может быть полезно другим.