Симулировать клик кнопки с помощью JavaScript при нажатии клавиши Enter в текстовом поле

В jQuery для реализации функционала, при котором нажатие клавиши Enter в поле ввода пароля приводит к нажатию кнопки, можно использовать следующий код:

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

$("#myButton").click(function() {
    alert("Код кнопки выполнен.");
});

В HTML это будет выглядеть так:

<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("pw").addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
    }
});

function buttonCode() {
    alert("Код кнопки выполнен.");
}

HTML для этого варианта будет таким:

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

Оба подхода обеспечивают одно и то же поведение: при нажатии клавиши Enter в поле ввода пароля будет срабатывать клик по кнопке "Submit".

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

<input type="text"
       id="txtSearch" 
       onkeydown="if (event.keyCode == 13) 
                        document.getElementById('btnSearch').click()"    
/>

<input type="button"
       id="btnSearch"
       value="Search"
       onclick="doSomething();"
/>

В данном примере, когда пользователь нажимает клавишу Enter в текстовом поле с id="txtSearch", происходит имитация нажатия кнопки с id="btnSearch" за счет вызова метода click(). Это позволит активировать действие функции doSomething(), которая связана с кнопкой "Search".

Убедитесь, что функция doSomething() определена в вашем JavaScript коде, чтобы обработать событие поиска.

Проблема решена:

<input type="text" id="txtSearch" onkeypress="return searchKeyPress(event);" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

<script>
function searchKeyPress(e) {
    // Проверяем, был ли передан объект события
    e = e || window.event;
    if (e.keyCode == 13) { // Если нажата клавиша Enter
        document.getElementById('btnSearch').click(); // Имитируем клик по кнопке
        return false; // Отменяем стандартное действие
    }
    return true; // Всё остальное продолжаем как обычно
}
</script>

Таким образом, при нажатии клавиши Enter в текстовом поле будет вызыван клик по кнопке поиска, что позволяет выполнять действие, привязанное к этой кнопке.

Чтобы сделать кнопку элементом submit, достаточно использовать атрибут type="submit", как показано в следующем примере. Это обеспечит автоматическое поведение кнопки при нажатии на клавишу Enter в полях формы:

<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, чтобы дать возможность этому коду (предположительно) работать и внутри формы. (Я планирую это протестировать, после чего уберу упомянутое содержание.)