当用户点击输入按钮时触发一个按钮

问题描述：

我想在用户按下输入内的输入按钮时触发按钮点击。我试图做到这一点，但没有任何成功。这里是我的尝试：当用户点击输入按钮时触发一个按钮

<!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>

是让它保持警惕的目标？只需调用执行警报的函数 – Ju66ernaut

表单中的按钮是否有原因？这样你可以听取提交事件。 – hasanain

一切似乎都对。你检查过语法吗？ – pcbabu

答

你有一个语法错误。 您刚才错过了您的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> 
 
\t <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>

另外，'key'函数应该带一个'event' argumentsmant并测试if '（event || window.event）.keyCode == 13'与大多数浏览器兼容（我认为全局事件只是IE） – Artyer

是的，如果我们要走这条路，我们应该使用'event。这是'inste 'keyCode'的广告。但是，手头的问题只是缺少的花括号。 –

@ScottMarcus这样做的问题是，当按下一个键时，你的代码段会失败，并带有'ReferenceError'。 **编辑：从不知道** – RyanZim

答

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>

您的代码不起作用，因为你的如果 statement.Also后缺少一个支架，我希望我的代码将帮助你。

虽然这可能会起作用，但它使用的是JQuery，而OP并没有提出这个问题。它也不通知OP为什么他的代码不起作用。 –

当用户点击输入按钮时触发一个按钮

相关推荐