我有一个文本输入和一个按钮(见下文)。我该如何使用JavaScript? 触发按钮的单击事件 当。。。的时候 输入 在文本框内按下键?
我当前页面上已经有一个不同的提交按钮,所以我不能简单地将按钮设置为提交按钮。和我 只要 想要的 输入 如果从这个文本框中按下该按钮,则单击此特定按钮的键,没有别的。
<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"
onkeydown = "if (event.keyCode == 13)
document.getElementById('btnSearch').click()"
/>
<input type = "button"
id = "btnSearch"
value = "Search"
onclick = "doSomething();"
/>
想出这个:
<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>
包含输入字段的元素使这项工作(感谢Sergey Ilinsky)。
重新定义标准行为并不是一个好习惯 输入 key应始终调用表单上的提交按钮。
因为没有人使用过 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清洁的同时单独更改事件类型和操作。
注意 这可能是值得的,以确保这是在a。之外 <form>
因为当我将这些元素包含在其中时按Enter提交表单并重新加载页面。我发现了一些眨眼之处。
附录:感谢@ruffin的评论,我添加了缺少的事件处理程序和一个 preventDefault
允许此代码(可能)在表单内部工作。 (我将开始测试这个,此时我将删除括号内容。)
在纯JavaScript中,
if (document.layers) {
document.captureEvents(Event.KEYDOWN);
}
document.onkeydown = function (evt) {
var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
if (keyCode == 13) {
// For Enter.
// Your function here.
}
if (keyCode == 27) {
// For Escape.
// Your function here.
} else {
return true;
}
};
我注意到答案只在jQuery中给出,所以我想用普通的JavaScript给出一些东西。
你可以使用的一个基本技巧,我没有看到完全提到过。如果您想在Enter上执行ajax操作或其他工作,但又不想实际提交表单,则可以执行以下操作:
<form onsubmit="Search();" action="javascript:void(0);">
<input type="text" id="searchCriteria" placeholder="Search Criteria"/>
<input type="button" onclick="Search();" value="Search" id="searchBtn"/>
</form>
设置动作=“javascript:void(0);”这样就是防止默认行为的捷径。在这种情况下,无论您是按Enter键还是单击按钮,都会调用一个方法,并调用ajax来加载某些数据。
尝试一下:
<input type="text" id="txtSearch"/>
<input type="button" id="btnSearch" Value="Search"/>
<script>
window.onload = function() {
document.getElementById('txtSearch').onkeypress = function searchKeyPress(event) {
if (event.keyCode == 13) {
document.getElementById('btnSearch').click();
}
};
document.getElementById('btnSearch').onclick =doSomething;
}
</script>
要在每次按下回车键时触发搜索,请使用以下命令:
$(document).keypress(function(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
$('#btnSearch').click();
}
}