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

ОТВЕТЫ

Ответ 1

$(document).ready(function(){
    $('#TextBoxId').keypress(function(e){
      if(e.keyCode==13)
      $('#linkadd').click();
    });
});

Ответ 2

Существует js-свободное решение.

Установите type=submit на кнопку, которую вы хотите по умолчанию, и type=button на другие кнопки. Теперь в форме ниже вы можете нажать Enter в любом поле ввода, и кнопка Render будет работать (несмотря на то, что это вторая кнопка в форме).

Пример:

    <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 нет).

Ответ 3

Это 2019 год.

НЕ ИСПОЛЬЗУЙТЕ keypress

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

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

    Событие keypress вызывается при нажатии клавиши, и эта клавиша обычно выдает символьное значение. Вместо этого используйте input.

  2. Это устарело.

    События пользовательского интерфейса событияkeypress (рабочий проект W3C, опубликованный 8 ноября 2018 года.)

    • ПРИМЕЧАНИЕ | Событие keypress традиционно связано с обнаружением символьного значения, а не физического ключа, и может быть недоступно для всех клавиш в некоторых конфигурациях.
    • ВНИМАНИЕ | Тип события keypress определяется в данной спецификации для справки и полноты, но в этой спецификации не рекомендуется использовать этот тип события. В контексте редактирования авторы могут подписаться на событие beforeinput.

НЕ ИСПОЛЬЗУЙТЕ KeyboardEvent.keyCode

  1. Это устарело.

    KeyboardEvent.keyCode Сеть разработчиков Mozilla

    Устаревший | Эта функция больше не рекомендуется. Хотя некоторые браузеры могут по-прежнему поддерживать его, он, возможно, уже удален из соответствующих веб-стандартов, может быть в процессе удаления или может храниться только в целях совместимости. Избегайте его использования и обновляйте существующий код, если это возможно; см. таблицу совместимости внизу этой страницы, чтобы принять решение. Имейте в виду, что эта функция может перестать работать в любое время.

Что я должен использовать тогда? (Хорошая практика)

// Make sure this code gets executed after the DOM is loaded.
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;'.
});

Ответ 4

  • Замените button на submit
  • Будьте progressive, убедитесь, что у вас версия на стороне сервера
  • Привяжите JavaScript к обработчику submit формы, а не обработчику click кнопки

Нажатие кнопки ввода в поле приведет к отправке формы, и обработчик отправки будет срабатывать.

Ответ 5

Вы можете добавить обработчик событий на свой вход так:

document.getElementById('addLinks').onkeypress=function(e){
    if(e.keyCode==13){
        document.getElementById('linkadd').click();
    }
}

Ответ 6

Это должно сделать это, я использую jQuery, вы можете написать простой javascript.
Замените sendMessage() своей функциональностью.

$('#addLinks').keypress(function(e) {
    if (e.which == 13) {
        sendMessage();
        e.preventDefault();
    }
});

Ответ 7

Прежде всего добавьте файл библиотеки jquery jquery и назовите его в своем html-заголовке.

а затем используйте код на основе jquery...

$("#id_of_textbox").keyup(function(event){
    if(event.keyCode == 13){
        $("#id_of_button").click();
    }
});

Ответ 8

Он работает, когда input type="button" заменяется на input type="submit" для кнопки по умолчанию, которая должна быть запущена.

Ответ 9

Основываясь на некоторых предыдущих ответах, я придумал следующее:

<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();
});

Взгляните на Fiddle

EDIT: Если вы не хотите добавлять дополнительные элементы html, вы можете сделать это только с помощью JS:

    $("input").keyup(function(event) {
        if (event.keyCode === 13) {
            $("button").click();
        }
    });

Ответ 10

Я нашел w3schools.com как их, попробуйте мне страницу в следующем.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_trigger_button_enter

Это работало в моем обычном браузере, но не работало в моем приложении php, которое использует встроенный браузер php.

Немного поигравшись, я пришел к следующей чистой JavaScript-альтернативе, которая подходит для моей ситуации и должна работать в любой другой ситуации:

    function checkForEnterKey(){
        if (event.keyCode === 13) {
            event.preventDefault();
            document.getElementById("myBtn").click();
        }
    }

    function buttonClickEvent()
    {
        alert('The button has been clicked!');
    }

HTML Нажмите клавишу ввода внутри текстового поля, чтобы активировать кнопку.

    <br />
    <input id="myInput" onkeyup="checkForEnterKey(this.value)">
    <br />
    <button id="myBtn" onclick="buttonClickEvent()">Button</button>

Ответ 11

$('#input_id').keydown(function (event) {
    if (event.keyCode == 13) { 
         // Call your function here or add code here
    }
});

Ответ 12

Я использую кнопку кендо. Это сработало для меня.

<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>