Как вызвать кнопку 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

  1. keypress событие не запускается когда пользователь нажимает ключ, который не создает никакого символа, например Tab, Caps Lock, удалить, Backspace, побег, слева и справа Shift, функциональные клавиши(F1 - F12).

    keypress событие с Сеть Разработчиков Mozilla

    на keypress событие запускается, когда ключ придавливается, и этот ключ обычно создает значение символа. Использовать .

  2. он был осужден.

    keypress событие с DOM Уровень 3-рабочий проект W3C, 04 августа 2016-UI Events

    Примечание: на keypress событие традиционно ассоциируется с обнаружение символьного значения, а не физического ключа, и могут быть недоступны на всех ключах в некоторых конфигурациях. предупреждение: на keypress тип события, определенные в этой спецификации для справки и полноты, но эта спецификация осуждает использование этого тип события. когда в контекстах редактирования авторы могут подписаться на событие.


НЕ ИСПОЛЬЗОВАТЬ KeyboardEvent.keyCode

  1. он был осужден.

    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;`.
});

  1. заменить button с submit
  2. быть прогрессивное, убедитесь, что у вас серверная версия
  3. привязать 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>