Mám jeden textový vstup a jedno tlačidlo (pozri nižšie). Ako môžem pomocou JavaScriptu spustiť udalosť kliknutia na tlačidlo, keď je v textovom poli stlačené tlačidlo Enter?
Na mojej aktuálnej stránke sa už nachádza iné tlačidlo odoslania, takže nemôžem'jednoducho urobiť z tlačidla tlačidlo odoslania. A chcem, aby kláves Enter klikol na toto konkrétne tlačidlo, ak sa stlačí v tomto jednom textovom poli, nič iné.
<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
V jQuery by fungoval nasledujúci postup:
$("#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>
Alebo v jednoduchom JavaScripte by fungoval nasledujúci postup:
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>
Prišiel som na 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>
Vytvorte tlačidlo ako prvok odoslania, aby bolo automatické.
<input type = "submit"
id = "btnSearch"
value = "Search"
onclick = "return doSomething();"
/>
Všimnite si, že na to, aby to fungovalo, budete potrebovať prvok <form>
obsahujúci vstupné polia (vďaka Sergejovi Ilinskému).
Nie je'dobré predefinovať štandardné správanie, kláves Enter by mal vždy volať tlačidlo odoslania vo formulári.