Bir metin girişi ve bir düğmem var (aşağıya bakın). Metin kutusunun içinde Enter tuşuna basıldığında düğmenin tıklama olayını tetiklemek için JavaScript'i nasıl kullanabilirim?
Mevcut sayfamda zaten farklı bir gönder düğmesi var, bu yüzden düğmeyi basitçe bir gönder düğmesi yapamam. Ve ben sadece Enter tuşunun bu metin kutusunun içinden basıldığında bu özel düğmeye tıklamasını istiyorum, başka bir şey değil.
<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
jQuery'de aşağıdaki şekilde çalışacaktır:
$("#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>
Ya da düz JavaScript'te aşağıdaki işe yarayacaktır:
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>
Bunu anladım:
<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>
Düğmeyi bir gönderme öğesi yapın, böylece otomatik olacaktır.
<input type = "submit"
id = "btnSearch"
value = "Search"
onclick = "return doSomething();"
/>
Bunun çalışması için girdi alanlarını içeren bir <form>
öğesine ihtiyacınız olduğunu unutmayın (teşekkürler Sergey Ilinsky).
Standart davranışı yeniden tanımlamak iyi bir uygulama değildir, Enter tuşu her zaman bir formdaki gönder düğmesini çağırmalıdır.