我有一个文本输入和一个按钮(见下文)。我如何使用JavaScript触发按钮的点击事件时,进入键按下文本框内?
在我的当前页面上已经有一个不同的提交按钮,所以我不能简单地将该按钮设置为提交按钮。并且,我只想让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() {
警报(“按钮代码已执行。
});
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>
用户名:<输入 id=“用户名” 类型=“文本”><br>
密码: <输入 id=“pw” 类型=“密码”><br>
<按钮 id=“我的按钮”>提交</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();
}
});
功能按钮代码()
{
警报(“按钮代码已执行。
}
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>
用户名:<输入 id=“用户名” 类型=“文本”><br>
密码: <输入 id=“pw” 类型=“密码”><br>
<button id=“myButton” onclick=“buttonCode()”>提交</button>
由于还没有人使用addEventListener,这里是我的版本。给定这些元素:
<input type = "text" id = "txt" />
<input type = "button" id = "go" />
我会使用以下方法:
var go = document.getElementById("go");
var txt = document.getElementById("txt");
txt.addEventListener("keypress", function(event) {
event.preventDefault();
if (event.keyCode == 13)
go.click();
});
这允许您分别更改事件类型和操作,同时保持HTML的整洁。
请注意,可能有必要确保它在<form>之外,因为当我将这些元素括在其中时,按Enter键提交了表单并重新加载了页面。我眨眼间就发现了。
附录:由于@ruffin的注释,我添加了缺少的事件处理程序和preventDefault,以允许这段代码(大概)也可以在表单中工作。(我将对此进行测试,然后删除括号中的内容。)