javascript - JavaScript trigger文本框回车键事件

  显示原文与译文双语对照的内容

我有一个文本输入和一个按钮( 见下文) 。 我如何利用js时要轻触发点击按钮事件 键时输入的文本框内?

当前页面上已经有一个不同的提交按钮,所以不能简单地将按钮作为提交按钮。 在还在这个一个文本框,没有什么else,内,我只 希望输入键来单击这个特定的按钮,如果它被按下。


<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();
 }
});

抱歉,我不知道如何用纯JavaScript来做它,但是也许其他人可以把它推断出来?

使用 jQuery ;)

那就把它编码成 !


<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="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();
 }
 }
 </script>

使按钮成为一个提交元素,所以它将是自动的。


<input type="submit" id="btnSearch" value="Search" onclick="return doSomething();"/>

注意,你需要一个包含输入字段的<form> 元素以使这里工作正常。

重新定义标准行为不是一个好习惯。输入键应该总是调用表单上的提交按钮。

用普通的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 。

因为没有人使用 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() {
 if (event.keyCode == 13) go.click();
});

这允许你在保持HTML干净的同时分别更改事件类型和动作。

注意之外的,它可能是值得的,以确保这是一个 <form>,因为当我封闭他们的这些元素按Enter键提交表单并重新加载页面。 花了我几分钟才发现。


onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"

这只是我最近的一些项目。 我在网络上找到了它,我不知道是否有一个更好的方法,或者用普通的老式 JavaScript 。

要在每次按下enter键时触发搜索,请使用以下命令:


$(document).keypress(function(event) {
 var keycode = (event.keyCode? event.keyCode : event.which);
 if (keycode == '13') {
 $('#btnSearch').click();
 }
}

你可以使用的一个基本技巧,我没有完全提到。 如果你想做一个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>

设置 action="javascript: void ( 0 ) ;"类似于防止默认行为的快捷方式。 在这种情况下,一个方法被调用,不管你是否点击了回车,或者单击了一个ajax调用来加载一些数据。

...