Pogas klikšķa aktivizēšana, izmantojot JavaScript, teksta lodziņā ar taustiņu Enter

Man ir viena teksta ievade un viena poga (skatīt tālāk). Kā es varu izmantot JavaScript, lai iedarbinātu pogas klikšķa notikumu, kad teksta lodziņā tiek nospiests Enter taustiņš?

Manā pašreizējā lapā jau ir cita iesniegšanas poga, tāpēc es nevaru vienkārši padarīt šo pogu par iesniegšanas pogu. Un es gribu, lai Enter taustiņš noklikšķina uz šīs konkrētās pogas, ja tā tiek nospiesta šajā teksta lodziņā, un nekas cits.

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
Sam Axe
Rediģēts jautājums 15pēcpusdienari3t janvārī 2015 в 3:17
Programmēšana
javascript button onkeypress onclick
30pēcpusdienari1t septembrī 2008 в 9:32
83 skati
Risinājums

Izmantojot jQuery, varētu darboties šādi:

$("#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

Vai arī, izmantojot vienkāršu JavaScript, varētu darboties šādi:

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
Rediģēta atbilde 4pēcpusdienari6t februārī 2018 в 6:58
Komentāri (15)

Izdomāts:

<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
Rediģēta atbilde 12priekšpusdienari3t novembrī 2015 в 4:53
Komentāri (3)

Padariet pogu par iesniegšanas elementu, lai tā būtu automātiska.

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

Ņemiet vērā, ka, lai tas darbotos, jums būs nepieciešams `` elements, kas satur ievades laukus (paldies Sergejam Ilinskim).

Nav laba prakse pārdefinēt standarta uzvedību, Enter taustiņam vienmēr jāizsauc veidlapas poga "Iesniegt".

icedwater
Rediģēta atbilde 28priekšpusdienari0t decembrī 2015 в 9:25
Komentāri (3)