Question

当用户按下输入内的Enter按钮时，我想触发按钮单击。我试图这样做，但没有任何成功。这是我的尝试：

<!DOCTYPE html>
<html>

<head>
  <title>Exercice 1</title>
  <meta charset="utf-8">
  <script>
    function key() {
      if (event.keyCode == 13) {
        document.getElementById('btn').click()
      }

      function test() {
        alert('okay');
      }
  </script>
</head>

<body>
  <form>
    <input type="text" placeholder="Write your word" onkeydown="key()" />
  </form>
  <button id="btn" onClick="test()">test</button>
</body>

</html>

Answer 1

您遇到语法错误。 您刚刚在if声明中错过了一个结束的大括号。

// Modern browsers send an event object to the event
// callback function
function key(evt){
  // But, older versions of IE expose the event as a property
  // of the window object, so let's make sure we have a good
  // reference to it:
  evt = evt || window.event;

  // Getting the key code has never been standardized
  if (evt.which === 13){
    document.getElementById('btn').click();
  } // <-- You were missing this.
}
         
function test(){
  alert('okay');
}

<form>
	<input type="text" placeholder="Write your word" onkeydown = "key()"/>
</form>
<button id="btn" onClick="test()">test</button>

而且，我们确实应该避免内联HTML事件处理，因为它违反了HTML和JavaScript之间的关注点分离，它导致创建全局匿名代理函数，修改回调中的this绑定而不是利用现代W3C DOM Level 2 Event Handling standard

这是挂钩事件处理程序的现代方法：

window.addEventListener("DOMContentLoaded", function(){
  
  var btn = document.getElementById("btn");
  var txt = document.getElementById("txtInput");
  
  btn.addEventListener("click", test);
  txt.addEventListener("keydown", key);

    // Modern browsers send an event object to the event
    // callback function
    function key(evt){
      // But, older versions of IE expose the event as a property
      // of the window object, so let's make sure we have a good
      // reference to it:
      evt = evt || window.event;

      console.log("Callback function invoked by: " + evt.target);
      console.log("Key pressed was: " + evt.which);      
      
      // Getting the key code has never been standardized until 
      // fairly recently. event.which is the recommended approach
      if (evt.which === 13){
        document.getElementById('btn').click();
      } // <-- You were missing this.
    }
             
    function test(){
      alert('okay');
    }
  
});

 <input type="text" id="txtInput" placeholder="Write your word">
 <button id="btn">test</button>

Answer 2

window.addEventListener("DOMContentLoaded", function(){

      var btn = document.getElementById("btn");
      var txt = document.getElementById("txtInput");

      btn.addEventListener("click", test);
      txt.addEventListener("keydown", key);

function key(evt){

      evt = evt || window.event;

      if (evt.which === 13){
        document.getElementById('btn').click();
      }
    }
});

 <input type="text" id="txtInput" placeholder="Write your word">
 <button id="btn">test</button>

您的代码无效，因为您在 if 语句后缺少括号。我希望我的代码能为您提供帮助。

当用户单击Enter按钮时触发按钮

2 个答案: