Laukaise painikkeen napsautus JavaScriptillä tekstiruudun Enter-näppäimellä.

Minulla on yksi tekstinsyöttö ja yksi painike (katso alla). Miten voin käyttää JavaScriptiä laukaista painikkeen napsautustapahtuman, kun Enter -näppäintä painetaan tekstikentässä?

Nykyisellä sivulla on jo toinen lähetä-painike, joten en voi yksinkertaisesti tehdä painikkeesta lähetä-painiketta. Ja haluan, että Enter -näppäin napsauttaa tätä tiettyä painiketta, jos sitä painetaan tämän tekstilaatikon sisällä, ei mitään muuta.

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
Sam Axe
Muokattu kysymysT33 tammikuu 2015 в 3:17
Ohjelmointi
javascript button onkeypress onclick
T11 syyskuu 2008 в 9:32
78 näkymät
Ratkaisu

JQueryssä seuraava toimii:

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

Tai pelkällä JavaScriptillä, seuraava toimisi:

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
Muokattu vastausta T66 helmikuu 2018 в 6:58
Kommentit (15)

Sain tämän selville:

<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
Muokattu vastausta T33 marraskuu 2015 в 4:53
Kommentit (3)

Tee painikkeesta submit-elementti, jotta se toimii automaattisesti.

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

Huomaa, että tarvitset ``-elementin, joka sisältää syöttökentät, jotta tämä toimii (kiitos Sergey Ilinsky).

Ei ole hyvä käytäntö määritellä uudelleen vakiokäyttäytymistä, Enter -näppäimen pitäisi aina kutsua lomakkeen lähetä-painiketta.

icedwater
Muokattu vastausta T00 joulukuu 2015 в 9:25
Kommentit (3)