在输入上添加 javascript keyup - Javascript

在 Web 开发中，我们经常需要在输入框内监听用户的输入，在用户输入时做一些处理，这就需要用到 JavaScript 的 keyup 事件。

什么是 keyup 事件？

keyup 是 JavaScript 中的一个事件，它会在用户释放键盘上的任意一个键时触发。通常，我们会在输入框中使用它来监听用户的输入。

如何使用 keyup 事件？

可以通过下面的示例代码来监听用户在输入框中输入，每当用户松开一个键后，就会在控制台中输出输入框的值。

const input = document.querySelector('input');

input.addEventListener('keyup', function(e) {
  console.log('Input value: ' + e.target.value);
});

在上面的代码中，我们首先获取了一个 input 元素，然后添加了一个 keyup 的事件监听器。当用户释放一个键时，keyup 事件就会被触发，然后在回调函数中打印出输入框的值。

实战应用

实际上，keyup 事件的用途非常广泛，它可以帮助我们实现很多有用的功能，比如实时搜索：

<input type="text" id="searchInput" placeholder="Search...">
<ul id="results"></ul>

<script>
const searchInput = document.querySelector('#searchInput');
const results = document.querySelector('#results');
const cities = ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Philadelphia', 'Phoenix', 'San Antonio', 'San Diego', 'Dallas', 'San Jose', 'Austin', 'Jacksonville', 'Fort Worth', 'Columbus', 'San Francisco', 'Charlotte', 'Indianapolis', 'Seattle', 'Denver', 'Washington'];

searchInput.addEventListener('keyup', function(e) {
  const query = e.target.value.toLowerCase();
  const matches = cities.filter(city => city.toLowerCase().includes(query));
  
  // 清空搜索结果
  results.innerHTML = '';

  // 显示匹配到的结果
  matches.forEach(match => {
    const li = document.createElement('li');
    li.textContent = match;
    results.appendChild(li);
  });
});
</script>

在上面的示例代码中，我们给一个输入框添加了一个 keyup 的事件监听器，用来实现实时搜索。每当用户输入一个字符时，就会触发 keyup 事件，并在回调函数中遍历城市列表，找到所有包含用户输入的城市名称，并将这些城市动态地添加到一个 <ul> 元素中。

总结

通过本文的介绍，我们了解了什么是 keyup 事件，以及如何使用它来监听用户在输入框中的输入。同时，我们也学习了如何在实际开发中应用 keyup 事件来实现一些有用的功能，比如实时搜索。