Нажать кнопку «JavaScript» на кнопке «Ввод» в текстовом поле.

Question

У меня есть один ввод текста и одна кнопка (см. Ниже). Как я могу использовать JavaScript, чтобы вызвать событие нажатия кнопки , когда внутри текстового поля нажата клавиша Enter ?

На моей текущей странице уже есть другая кнопка отправки, поэтому я не могу просто сделать кнопку отправки кнопкой. И я только хочу, чтобы клавиша Enter нажимала эту конкретную кнопку, если она нажата из этого текстового поля, и ничего больше.

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

Answer 1

В 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:&nbsp;<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:&nbsp;<input id="pw" type="password"><br>
<button id="myButton" onclick="buttonCode()">Submit</button>

Answer 2

Тогда просто введите его!

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

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

Answer 3

понял это:

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

Answer 4

Сделайте кнопку элементом отправки, чтобы она была автоматической.

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

Обратите внимание, что для этой работы вам понадобится элемент <form>, содержащий поля ввода (спасибо, Сергей Ильинский).

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

Answer 5

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

Answer 6

В простом 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.

Answer 7

Один основной трюк, который вы можете использовать для этого, который я не видел полностью упомянутым. Если вы хотите выполнить действие 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>

Настройка действия = "javascript: void (0);" как это ярлык для предотвращения поведения по умолчанию. В этом случае вызывается метод, нажимаете ли вы клавишу ввода или нажимаете кнопку, и для загрузки некоторых данных выполняется вызов ajax.

Answer 8

Попробуйте:

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

Answer 9

Для запуска поиска при каждом нажатии клавиши ввода, используйте это:

$(document).keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
        $('#btnSearch').click();
    }
}

Answer 10

onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"

Это просто кое-что из недавнего проекта ... Я нашел его в сети, и я понятия не имею, есть ли лучший способ или нет в простом старом JavaScript.