Mam jedno wejście tekstowe i jeden przycisk (patrz poniżej). Jak mogę użyć JavaScript, aby **wyzwolić zdarzenie kliknięcia przycisku' kiedy Enter zostanie naciśnięty wewnątrz pola tekstowego?
Na mojej obecnej stronie jest już inny przycisk przesyłania, więc nie mogę po prostu uczynić przycisku przyciskiem przesyłania. I, ja tylko chcę, aby Enter klawisz kliknął ten konkretny przycisk, jeśli zostanie on naciśnięty z wewnątrz tego jednego pola tekstowego, nic innego.
<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
W jQuery zadziałałoby następujące rozwiązanie:
$("#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>
<button id="myButton">Submit</button>
Lub w zwykłym JavaScripcie, poniższe zadziałałoby:
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>
<button id="myButton" onclick="buttonCode()">Submit</button>
Rozgryzłem to:
<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>
Spraw, aby przycisk był elementem submit, więc będzie to automatyczne.
<input type = "submit"
id = "btnSearch"
value = "Search"
onclick = "return doSomething();"
/>
Zauważ, że będziesz potrzebował elementu <form>
zawierającego pola wejściowe, aby to zadziałało (dzięki Sergey Ilinsky).
Nie jest dobrą praktyką redefiniowanie standardowego zachowania, klawisz Enter powinien zawsze wywoływać przycisk submit na formularzu.