javascript - 如何在文本框中按下 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!");
  }
});

如果我在搜索框中输入内容并按 Enter 键，则控制台不会打印任何内容。关于我做错了什么有什么建议吗？请随时询问我是否可以澄清我的问题。

非常感谢您抽出时间。

Answer 1

如果您的输入位于表单中，则按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>

这就是为什么您需要在 key 处理程序中执行 event.preventDefault() 的原因。