Question

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

以下是代码

脚本

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

HTML

<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键时什么也没发生

Answer 1

将keyup替换为onkeyup

document.getElementById('myInput').onkeyup = function(e) {
  if (e.keyCode == 13) {
    document.getElementById('mybtn').click();
  }
}

function retrieve(elem) {
  console.log('clicked')
}

<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内，并将输入类型更改为submit。在这种情况下，按下enter时，它将在第一个submit按钮上触发点击事件内部表格

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

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

Answer 2

keyup不是函数。

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

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

使用<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');"/> <script> document.getElementById('myInput').onkeyup=function(e){ if(e.keyCode==13){ document.getElementById('mybtn').click(); } } function retrieve(id){ console.log("Value: "+document.getElementById(id).value); } </script>：

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

添加事件监听器：

<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');"/>
    <script>
function handleInputKeyup(e){
        if(e.keyCode==13){
            document.getElementById('mybtn').click();
        }
}
function retrieve(id){
     console.log("Value: "+document.getElementById(id).value);
}
</script>

使用内联事件处理程序：

text()

Answer 3

检查返回键（keyCode==13）的keyup事件，然后将click事件调度到目标DOM元素上：

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

<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方法是一种普遍适用的方法。您甚至可以通过执行以下小代码片段来伪造在输入字段上被按下的回车键：

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

在文本框中按Enter触发单击按钮

3 个答案: