在文本框中按下 Enter 時如何觸發 javascript 函數

Question

我有以下 HTML 代碼：

    <nav>
        <div class="nav-wrapper">
        <form>
            <div class="input-field">
            <input id="username_entry" type="search" placeholder="Enter Last.fm username" required>
            <label class="label-icon" for="search"><i class="material-icons">search</i></label>
            <i class="material-icons">close</i>
            </div>
        </form>
        </div>
    </nav>  

如何創建一個在用戶按下 Enter 鍵時執行的 Javascript 函數？

我似乎只能找到使用按鈕的示例，您只需模擬單擊按鈕即可。 例如，

// Get the input field
var input = document.getElementById("myInput");

// Execute a function when the user releases a key on the keyboard
input.addEventListener("keyup", function(event) {
  // Number 13 is the "Enter" key on the keyboard
  if (event.keyCode === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    // Trigger the button element with a click
    document.getElementById("myBtn").click();
  }
});

我不想在頁面上放置一個按鈕，如果我刪除它並嘗試只執行一個命令，它就不起作用。

// Get the input field
var input = document.getElementById("username_entry");

// Execute a function when the user releases a key on the keyboard
input.addEventListener("keyup", function(event) {
  // Number 13 is the "Enter" key on the keyboard
  if (event.keyCode === 13) {
    console.log("it worked!");
  }
});

如果我在搜索框中輸入內容並按回車鍵，則控制台不會打印任何內容。 關於我做錯了什么的任何建議？ 請不要猶豫，問我是否可以澄清我的問題。

非常感謝您的寶貴時間。

Answer 1

如果您的input是在form ，則按Enter時的默認行為是提交表單。 這會導致頁面卸載，實質上是重置所有內容。

 document.querySelector('input').addEventListener('keydown', function(event) { if (event.key === 'Enter') { console.log('You pressed Enter'); } }) document.querySelector('form input').addEventListener('keydown', function(event) { if (event.key === 'Enter') { console.log('You pressed Enter'); } }) document.querySelector('form + form input').addEventListener('keydown', function(event) { if (event.key === 'Enter') { event.preventDefault(); // this prevents the submit on Enter console.log('You pressed Enter'); } })

 input { width: 300px; }

 <input placeholder="I'm not in a form." /> <form> <input placeholder="I'm in a form." /> </form> <form> <input placeholder="I'm in a form. Enter default gets prevented" /> </form>

這就是您需要在鍵處理程序中執行event.preventDefault() 。