目录
前言
焦点事件
内容
语法
案例一：搜索框
需求
详细代码
键盘事件
内容
语法
案例二：输入字符的统计
需求分析
详细代码
总结
前言
困，大家凑合看吧
焦点事件
内容
主要是表单获得光标
语法
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>总结
夜阑卧听风吹雨，铁马冰河入梦来
