JavaScript的keyup事件|极客笔记

JavaScript的keyup事件

一、介绍

在JavaScript中，键盘事件是常见的交互方式之一。其中，keyup事件是当用户松开按键时触发的事件。本文将详细探讨keyup事件的使用方法以及相关注意事项。

二、keyup事件的基本用法

keyup事件可以绑定在任何具有键盘输入的元素上，如文本框、文本区域等。当用户在该元素中松开按键时，keyup事件被触发。下面是一个使用keyup事件的基本示例。

<input type="text" id="myInput" />

<script>
  const input = document.getElementById("myInput");

  input.addEventListener("keyup", function(event) {
    console.log("键盘按键松开了");
  });
</script>

在上述示例中，我们创建了一个文本输入框，并给其绑定了keyup事件。当用户在输入框中松开任意一个键时，浏览器的开发者工具控制台将输出”键盘按键松开了”。

三、事件对象

当keyup事件触发时，浏览器会创建一个事件对象，并将该对象传递给事件处理函数。通过事件对象，我们可以获取有关按键信息的详细数据，如按下的按键码、按键的值等。

下面是一个使用事件对象的示例代码：

<input type="text" id="myInput" />

<script>
  const input = document.getElementById("myInput");

  input.addEventListener("keyup", function(event) {
    console.log("键盘按键松开了");
    console.log("按键码：", event.keyCode);
    console.log("按键的值：", event.key);
  });
</script>

运行上述示例后，我们可以在开发者工具控制台中看到该键的按键码和值。

四、应用示例

1. 搜索提示

通过keyup事件，我们可以实现搜索提示的功能。在用户输入关键词时，实时展示匹配的搜索结果。

下面是一个基本搜索提示的示例代码：

<input type="text" id="searchInput" />
<div id="searchResults"></div>

<script>
  const input = document.getElementById("searchInput");
  const results = document.getElementById("searchResults");

  input.addEventListener("keyup", function(event) {
    const keyword = event.target.value;
    // 根据关键词进行搜索，并生成提示结果
    const data = getSearchResults(keyword);

    // 清空之前的结果
    results.innerHTML = "";

    // 遍历搜索结果，生成提示选项
    data.forEach(function(result) {
      const option = document.createElement("div");
      option.textContent = result;
      results.appendChild(option);
    });
  });

  // 模拟获取搜索结果的函数
  function getSearchResults(keyword) {
    // 假设这是从服务器获取的数据
    const data = [
      "JavaScript",
      "HTML",
      "CSS",
      "Vue.js",
      "React",
      "Angular"
    ];

    // 根据关键词过滤搜索结果
    const filteredData = data.filter(function(item) {
      return item.toLowerCase().includes(keyword.toLowerCase());
    });

    return filteredData;
  }
</script>

上述示例中，每当用户在搜索框中输入关键词并松开键盘时，根据输入的关键词生成匹配的搜索提示结果，然后将结果展示在页面上。

2. 打字游戏

利用keyup事件，我们可以实现一些有趣的应用，比如打字游戏。下面是一个简单的打字游戏示例。

<h1 id="score">得分：0</h1>
<p id="quote">请尽快键入以下句子：</p>
<p id="sentence">The quick brown fox jumps over the lazy dog.</p>
<textarea id="userInput"></textarea>

<script>
  const scoreElement = document.getElementById("score");
  const quoteElement = document.getElementById("quote");
  const sentenceElement = document.getElementById("sentence");
  const userInputElement = document.getElementById("userInput");

  // 初始化得分和用户输入索引
  let score = 0;
  let userInputIndex = 0;

  userInputElement.addEventListener("keyup", function(event) {
    // 获取用户输入的内容
    const userInput = event.target.value;

    // 获取当前应该输入的句子
    const sentence = sentenceElement.textContent;

    // 检查用户输入是否正确，并更新得分
    if (userInput === sentence.substring(0, userInput.length)) {
      score = userInput.length;
    }

    // 更新得分显示
    scoreElement.textContent = `得分：${score}`;

    // 如果用户输入完整句子，则显示新的句子，并重置得分和用户输入索引
    if (userInput === sentence) {
      const newSentence = getRandomSentence();
      sentenceElement.textContent = newSentence;
      score = 0;
      userInputElement.value = "";
    }
  });

  // 随机获取一个句子
  function getRandomSentence() {
    const sentences = [
      "I love JavaScript.",
      "Web development is fun.",
      "Practice makes perfect."
    ];

    const randomIndex = Math.floor(Math.random() * sentences.length);

    return sentences[randomIndex];
  }

  // 页面加载完成后，随机显示初始句子
  window.addEventListener("load", function() {
    const newSentence = getRandomSentence();
    sentenceElement.textContent = newSentence;
  });
</script>

上述示例中，我们通过keyup事件监听用户在输入框中的输入。根据用户的输入，实时检查输入是否正确，并更新得分。如果用户输入完整的句子，会生成新的句子，并重置得分和输入框。