Имам един текстов вход и един бутон (вижте по-долу). Как мога да използвам JavaScript, за да задействам събитието за щракване върху бутона, когато се натисне клавишът Enter в текстовото поле?
На текущата ми страница вече има друг бутон за изпращане, така че не мога просто да направя бутона бутон за изпращане. Освен това искам само Enter да щракне върху този конкретен бутон, ако е натиснат от това текстово поле, без нищо друго.
<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
В 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>
<button id="myButton">Submit</button>
Или на чист 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>
<button id="myButton" onclick="buttonCode()">Submit</button>
Разбрах това:
<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>
Направете бутона елемент за изпращане, така че да бъде автоматичен.
<input type = "submit"
id = "btnSearch"
value = "Search"
onclick = "return doSomething();"
/>
Имайте предвид, че за да работи това, ще ви е необходим елемент <form>
, съдържащ полетата за въвеждане (благодаря на Сергей Илински).
Не е'добра практика да се предефинира стандартното поведение, клавишът Enter трябва винаги да извиква бутона за изпращане на формуляра.