當用戶點擊輸入按鈕時觸發一個按鈕

我想在用戶按下輸入內的輸入按鈕時觸發按鈕點擊。我試圖做到這一點，但沒有任何成功。這裏是我的嘗試：當用戶點擊輸入按鈕時觸發一個按鈕

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

來源

2016-11-21 saadsaad

是讓它保持警惕的目標？只需調用執行警報的函數 – 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>

來源

2016-11-21 21:03:35

另外，'key'函數應該帶一個'event' argumentsmant並測試if '（event || window.event）.keyCode == 13'與大多數瀏覽器兼容（我認爲全局事件只是IE） – Artyer

是的，如果我們要走這條路，我們應該使用'event。這是'inste 'keyCode'的廣告。但是，手頭的問題只是缺少的花括號。 –

@ScottMarcus這樣做的問題是，當按下一個鍵時，你的代碼段會失敗，並帶有'ReferenceError'。 **編輯：從不知道** – RyanZim

-1

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後缺少一個支架，我希望我的代碼將幫助你。

來源

2016-11-21 21:25:59

雖然這可能會起作用，但它使用的是JQuery，而OP並沒有提出這個問題。它也不通知OP爲什麼他的代碼不起作用。 –

當用戶點擊輸入按鈕時觸發一個按鈕

回答

相關問題