关于javascript：在文本框中按Enter键以触发单击按钮

Pressing enter in text box to trigger click on a button

我需要在文本框中按Enter键以触发按钮上的单击事件。字段和按钮是我不想使用此按钮提交的更大表单的一部分

这是代码

脚本

1
2
3
4
5

document.getElementById('myInput').keyup=function(e){
if(e.keyCode==13){
document.getElementById('mybtn').click();
}
}

HTML

1 2	<input id="myInput" type="text" name="txt" placeholder="Enter Tag name and click Add"autocomplete="off"/> <input id='mybtn' class="btn btn-primary" type="button" value="Add" onclick="retrieve('myInput');"/>

按Enter键时没有任何反应

相关讨论

Element.keyup不是一个功能。

要将keyup事件侦听器添加到input，可以使用Element.onkeyup，Element.addEventListener("keyup", function(){})或向元素添加内联onkeyup事件处理程序。

通常，要向Element添加事件侦听器，语法为Element.on[eventname]或Element.addEventListener("[eventname]"
, function(){})

使用Element.onkeyup：

1
2
3
4
5
6
7
8
9
10
11

<input id="myInput" type="text" name="txt" placeholder="Enter Tag name and click Add"autocomplete="off"/>
<input id='mybtn' class="btn btn-primary" type="button" value="Add" onClick="retrieve('myInput');"/>

document.getElementById('myInput').onkeyup=function(e){
if(e.keyCode==13){
document.getElementById('mybtn').click();
}
}
function retrieve(id){
console.log("Value:"+document.getElementById(id).value);
}

添加事件侦听器：

1
2
3
4
5
6
7
8
9
10
11

<input id="myInput" type="text" name="txt" placeholder="Enter Tag name and click Add"autocomplete="off"/>
<input id='mybtn' class="btn btn-primary" type="button" value="Add" onClick="retrieve('myInput');"/>

document.getElementById('myInput').addEventListener("keypress", function(e){
if(e.keyCode==13){
document.getElementById('mybtn').click();
}
});
function retrieve(id){
console.log("Value:"+document.getElementById(id).value);
}

使用内联事件处理程序：

1
2
3
4
5
6
7
8
9
10
11

<input id="myInput" type="text" name="txt" placeholder="Enter Tag name and click Add"autocomplete="off" onkeyup="handleInputKeyup(event)"/>
<input id='mybtn' class="btn btn-primary" type="button" value="Add" onClick="retrieve('myInput');"/>

function handleInputKeyup(e){
if(e.keyCode==13){
document.getElementById('mybtn').click();
}
}
function retrieve(id){
console.log("Value:"+document.getElementById(id).value);
}

将keyup替换为onkeyup

1
2
3
4
5
6
7
8
9

document.getElementById('myInput').onkeyup = function(e) {
if (e.keyCode == 13) {
document.getElementById('mybtn').click();
}
}

function retrieve(elem) {
console.log('clicked')
}

1 2	<input id="myInput" type="text" name="txt" placeholder="Enter Tag name and click Add" autocomplete="off" /> <input id='mybtn' class="btn btn-primary" type="button" value="Add" onclick="retrieve('myInput');" />

或者，您可以将元素放在form＆amp;将输入类型更改为submit。在这种情况下，按enter将触发窗体中第一个submit按钮上的单击事件

1
2
3

function retrieve(elem) {
console.log('clicked')
}

1
2
3
4

检查返回键(keyCode==13)的keyup事件，然后将click事件分派到目标DOM元素：

1
2
3
4
5

document.getElementById('myInput').addEventListener("keyup", function(ev){
// console.log(ev.keyCode);
if (ev.keyCode==13) document.getElementById('mybtn').dispatchEvent(new Event('click'));

})

1 2	<input id="myInput" type="text" name="txt" placeholder="Enter Tag name and click Add"autocomplete="off"/> <input id='mybtn' class="btn btn-primary" type="button" value="Add" onclick="console.log('clicked, input is: '+document.getElementById('myInput').value)"/>

刚才意识到，除了我的.dispatchEvent()方法，我的方法与@ brk的解决方案完全相同。他的时间更短了！我不知道click()在Vanilla JavaScript中可用。我一直在使用jquery这么久以至于我不知道所有这些新的html5 / ES6新增内容;-)

但是，.dispatchEvent方法是一种普遍适用的方法。你甚至可以通过执行这个小片段来伪装输入字段上输入的键来伪装::

1 2	var e=new Event('keyup'); e.keyCode=13; // generate an"Enterkey pressed" event document.getElementById('myInput').dispatchEvent(e); // apply it on the input element