Задействане на кликване върху бутон с JavaScript върху клавиша Enter в текстово поле

Имам един текстов вход и един бутон (вижте по-долу). Как мога да използвам JavaScript, за да задействам събитието за щракване върху бутона, когато се натисне клавишът Enter в текстовото поле?

На текущата ми страница вече има друг бутон за изпращане, така че не мога просто да направя бутона бутон за изпращане. Освен това искам само Enter да щракне върху този конкретен бутон, ако е натиснат от това текстово поле, без нищо друго.

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
Sam Axe
Редактиран въпрос Направете януари 2015 в 3:17
Програмиране
javascript button onkeypress onclick
Направете септември 2008 в 9:32
160 изгледи
Решение

В 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: <input id="pw" type="password"><br>
Submit

Или на чист 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: <input id="pw" type="password"><br>
Submit
Black
Редактиран отговор Направете февруари 2018 в 6:58
Коментари (15)

Разбрах това:

<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>
Anik Islam Abhi
Редактиран отговор Направете ноември 2015 в 4:53
Коментари (3)

Направете бутона елемент за изпращане, така че да бъде автоматичен.

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

Имайте предвид, че за да работи това, ще ви е необходим елемент ``, съдържащ полетата за въвеждане (благодаря на Сергей Илински).

Не е'добра практика да се предефинира стандартното поведение, клавишът Enter трябва винаги да извиква бутона за изпращане на формуляра.

icedwater
Редактиран отговор Направете декември 2015 в 9:25
Коментари (3)