当前位置：首页 > article >正文

前端学习-焦点事件以及键盘事件与典型案例（二十五）

article 2025/1/14 4:04:39

前言

焦点事件

内容

语法

案例一：搜索框

需求

详细代码

键盘事件

内容

语法

案例二：输入字符的统计

需求分析

详细代码

总结

前言

困，大家凑合看吧

焦点事件

内容

主要是表单获得光标

语法

focus-获得焦点

blur-失去焦点

案例一：搜索框

需求

当表单得到焦点，显示下拉菜单，失去焦点隐藏下来菜单

详细代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小米搜索框案例</title>
  <style>
    /* 基本样式 */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    .search-container {
      position: relative;
      width: 300px;
    }

    .search-input {
      width: 100%;
      padding: 10px;
      font-size: 16px;
      border: 1px solid #fd0000;
      border-radius: 4px;
    }

    .dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      color: darkgray;
      border: 1px solid #ff0000;
      border-top: none;
      border-radius: 0 0 4px 4px;
      background-color: #fff;
      display: none;
      z-index: 1000;
    }

    .dropdown-menu ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .dropdown-menu li {
      padding: 10px;
      cursor: pointer;
    }

    .dropdown-menu li:hover {
      background-color: #f0f0f0;
    }
  </style>
</head>

<body>
  <div class="search-container">
    <input type="text" id="search-input" class="search-input" placeholder="小米笔记本">
    <div id="dropdown-menu" class="dropdown-menu">
      <ul>
        <li>全部商品</li>
        <li>小米11</li>
        <li>小米10S</li>
        <li>小米笔记本</li>
        <li>小张手机</li>
        <li>黑猫4</li>
        <li>空襦</li>
      </ul>
    </div>
  </div>

  <script>
    const searchInput = document.querySelector('#search-input');
    const dropdownMenu = document.querySelector('#dropdown-menu');

    searchInput.addEventListener('focus', function () {
      dropdownMenu.style.display = 'block';
    });

    searchInput.addEventListener('blur', function () {
      // 使用 setTimeout 确保在点击下拉菜单项时不会立即隐藏
      setTimeout(() => {
        dropdownMenu.style.display = 'none';
      }, 200);
    });
    // 处理下拉菜单项的点击事件
    dropdownMenu.querySelectorAll('li').forEach(item => {
      item.addEventListener('click', function () {
        searchInput.value = this.textContent;
        dropdownMenu.style.display = 'none';
      });
    });
  </script>
</body>

</html>

键盘事件

内容

主要是通过键盘触发

语法

Keydown键盘按下触发

Keyup键盘抬起触发

input-用户输入事件

案例二：输入字符的统计

需求分析

一个输入框，包括输入发布以及计数三部分

详细代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Input Box</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    .input-container {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 10px;
      width: 500px;
    }

    textarea {
      width: 70%;
      height: 100px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      resize: none;
    }

    .button-counter-container {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    button {
      padding: 20px 20px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin-bottom: 10px;
      margin-right: 40px;
      margin-top: 10px;
    }

    .counter {
      text-align: right;
      margin-right: 50px;
      margin-top: 25px;
    }

    .counter span {
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="input-container">
    <textarea id="input-text" placeholder="Enter text here..."></textarea>
    <div class="button-counter-container">
      <button id="submit-button">发布</button>
      <div class="counter">
        <span id="current-count">0</span>/200字
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const inputText = document.getElementById('input-text');
      const currentCount = document.getElementById('current-count');

      inputText.addEventListener('input', function () {
        const count = inputText.value.length;
        currentCount.textContent = count;
      });
    });
  </script>
</body>

</html>