Как вызвать кнопку HTML при нажатии Enter в текстовом поле?
Итак, код, который у меня есть до сих пор:
<fieldset id="LinkList">
<input type="text" id="addLinks" name="addLinks" value="http://">
<input type="button" id="linkadd" name="linkadd" value="add">
</fieldset>
это не <form>
и в <div>
. Однако, когда я набираю что-то в textbox
называется " addLinks "я хочу, чтобы пользователь мог нажать Enter и вызвать" linkadd"button
который затем запустит функцию JavaScript.
Как я могу это сделать?
Спасибо
Edit: Я нашел этот код, но он, похоже, не работает.
$("#addLinks").keyup(function(event){
if(event.keyCode == 13){
$("#linkadd").click();
}
});
10 ответов
$(document).ready(function(){
$('#TextBoxId').keypress(function(e){
if(e.keyCode==13)
$('#linkadd').click();
});
});
есть решение без js.
Set type=submit
к кнопке вы хотели бы быть по умолчанию и type=button
к другим кнопкам. Теперь в форме ниже вы можете нажать Enter в любых полях ввода и будет работать (несмотря на то, что это вторая кнопка в форме).
пример:
<button id='close_renderer_button' class='btn btn-success'
title='Перейти к редактированию программы'
type=button>
<span class='glyphicon glyphicon-edit'> </span> Edit program
</button>
<button id='render_button' class='btn btn-primary'
title='Построить фрактал'
type=submit
formaction='javascript:alert("Bingo!");'>
<span class='glyphicon glyphicon-send'> </span> Render
</button>
протестировано в FF24 и Chrome 35 (formaction
функции HTML5, но type
нет).
Это 2018.
НЕ ИСПОЛЬЗОВАТЬ keypress
-
keypress
событие не запускается когда пользователь нажимает ключ, который не создает никакого символа, например Tab, Caps Lock, удалить, Backspace, побег, слева и справа Shift, функциональные клавиши(F1 - F12).keypress
событие с Сеть Разработчиков Mozillaна
keypress
событие запускается, когда ключ придавливается, и этот ключ обычно создает значение символа. Использовать . -
он был осужден.
keypress
событие с DOM Уровень 3-рабочий проект W3C, 04 августа 2016-UI EventsПримечание: на
keypress
событие традиционно ассоциируется с обнаружение символьного значения, а не физического ключа, и могут быть недоступны на всех ключах в некоторых конфигурациях. предупреждение: наkeypress
тип события, определенные в этой спецификации для справки и полноты, но эта спецификация осуждает использование этого тип события. когда в контекстах редактирования авторы могут подписаться на событие.
НЕ ИСПОЛЬЗОВАТЬ KeyboardEvent.keyCode
- он был осужден.
KeyboardEvent.keyCode
с Сеть Разработчиков Mozillaудалено: эта функция была удалена из веб-стандартов. Хотя некоторые браузеры все еще могут поддерживать это в процессе удаления. Избегайте его использования и обновляйте существующий код, если это возможно; см. таблицу совместимости в нижней части этой страницы, чтобы принять решение. Помните, что эта функция может перестать работать в любое время.
что я должен использовать потом? (Хорошая практика)
ES6 в версии
// Put this code at the end of the <body>.
document.querySelector("#addLinks").addEventListener("keyup", event => {
if(event.key !== "Enter") return; // Use `.key` instead.
document.querySelector("#linkadd").click(); // Things you want to do.
event.preventDefault(); // No need to `return false;`.
});
не-ES6 версия
// Put this code at the end of the <body>.
document.querySelector("#addLinks").addEventListener("keyup", function(event) {
if(event.key !== "Enter") return; // Use `.key` instead.
document.querySelector("#linkadd").click(); // Things you want to do.
event.preventDefault(); // No need to `return false;`.
});
- заменить
button
сsubmit
- быть прогрессивное, убедитесь, что у вас серверная версия
- привязать JavaScript к
submit
обработчик формы, а неclick
обработчик кнопки
нажатие enter в поле вызовет отправку формы, и обработчик отправки будет запущен.
вы можете добавить обработчик событий к вашему входу следующим образом:
document.getElementById('addLinks').onkeypress=function(e){
if(e.keyCode==13){
document.getElementById('linkadd').click();
}
}
прежде всего добавьте файл библиотеки jquery в jQuery и назовите это в своей html-голове.
а затем используйте код на основе jquery...
$("#id_of_textbox").keyup(function(event){
if(event.keyCode == 13){
$("#id_of_button").click();
}
});
Это должно сделать это, я использую jQuery, вы можете написать простой javascript.
заменить sendMessage()
С вашей функциональности.
$('#addLinks').keypress(function(e) {
if (e.which == 13) {
sendMessage();
e.preventDefault();
}
});
основываясь на некоторых предыдущих ответах, я придумал это:
<form>
<button id='but' type='submit'>do not click me</button>
<input type='text' placeholder='press enter'>
</form>
$('#but').click(function(e) {
alert('button press');
e.preventDefault();
});
посмотри Скрипка
изменить: Если вы не хотите добавлять дополнительные элементы html, вы можете сделать это только с помощью JS:
$("input").keyup(function(event) {
if (event.keyCode === 13) {
$("button").click();
}
});
Он работает, когда тип ввода="кнопка" заменяется на тип ввода="отправить" для кнопки по умолчанию, которая должна быть запущена.
Я использую кнопку kendo. Это сработало для меня.
<div class="form-group" id="indexform">
<div class="col-md-8">
<div class="row">
<b>Search By Customer Name/ Customer Number:</b>
@Html.TextBox("txtSearchString", null, new { style = "width:400px" , autofocus = "autofocus" })
@(Html.Kendo().Button()
.Name("btnSearch")
.HtmlAttributes(new { type = "button", @class = "k-primary" })
.Content("Search")
.Events(ev => ev.Click("onClick")))
</div>
</div>
</div>
<script>
var validator = $("#indexform").kendoValidator().data("kendoValidator"),
status = $(".status");
$("#indexform").keyup(function (event) {
if (event.keyCode == 13) {
$("#btnSearch").click();
}
});
</script>