-1

我需要在文本框中按 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 时没有任何反应

4

3 回答 3

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>

于 2018-08-01T15:45:22.763 回答
1

Element.keyup不是函数。

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

通常，要将事件侦听器添加到元素，语法是Element.on[eventname]或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>

于 2018-08-01T16:01:43.997 回答
0

检查返回键 ( 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
于 2018-08-01T15:54:09.157 回答