实用技巧之HTML搭建搜索栏及筛选框-html教程-PHP中文网

搜索框应绑定 input 事件而非 keyup，因 input 覆盖粘贴、语音输入、中文上屏等所有文本变更场景；移动端需检查 disabled/readonly、touch-action/user-select 及聚焦时机。

实用技巧之html搭建搜索栏及筛选框

因为 onkeyup 会漏掉粘贴、语音输入、中文输入法上屏、长按重复输入等场景，用户实际体验就是“输完了没反应”。input 事件才是浏览器原生触发的、唯一覆盖所有文本变更方式的事件。

常见错误：在移动端监听 onkeyup，结果用户用拼音输入法打“zhang”，选词确认后不触发；或者 Ctrl+V 粘贴整段文字，只触发最后一次按键的 onkeyup，漏掉前面所有字符。

必须用 addEventListener('input', handler)，别写内联 oninput="..."（不易维护、无法移除）
如果表格或筛选逻辑较重，加 200–300ms 防抖：clearTimeout(timer); timer = setTimeout(() => filter(), 250)
IE11 不支持 input？可 fallback 到 propertychange，但仅限必要时启用，且要检测 event.propertyName === 'value'

+ name 属性

不用 form 标签，后续加 URL 同步、分页重载、重置按钮、无障碍支持，全都要重写逻辑。核心不是“看起来像表单”，而是复用浏览器原生能力。

典型翻车现场：用一堆 div 和自定义 data-* 属性存状态，结果 JS 里要手动遍历、拼对象、处理 checkbox 多选逻辑、模拟重置——最后发现 FormData 一行就能搞定的事，写了 80 行。

name 必须和后端 query 参数名一致，比如后端接收 ?brand=apple&price_min=1000，前端就得写 <input name="brand"> 和 <input name="price_min">
多个 checkbox 共享同一个 name（如 name="color"），浏览器自动只提交选中的值，new FormData(form) 直接产出 { color: ['red', 'blue'] }
禁用默认提交用 event.preventDefault()，但绝不能删掉 form 标签——否则 form.elements、form.checkValidity() 全失效

用 row.textContent.toLowerCase().includes(keyword) 看似简单，实则埋雷：它会把表头、隐藏列、script 内容、甚至换行符空格都算进去，匹配结果不可控，还容易误触发（比如搜“张三25”匹配到姓名+年龄拼起来的字符串）。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

真实项目里最常踩的坑是“搜不到”，排查半天发现是某列用了 display: none，但 textContent 仍包含其内容；或者日期列渲染了 “2026-08-05”，用户搜“08”却因格式差异匹配失败。

原始数据必须存在 JS 数组里（如 tableData = [{ name: "张三", age: 25 }]），过滤只跑这个数组
明确指定搜索字段：const searchFields = ["name", "dept"]，避免跨列干扰
数值/日期/空值要安全转换：String(row[field]).toLowerCase().includes(keyword.toLowerCase())，String(null) 是 "null"，不会报错
无结果时插入提示行，colspan 值必须动态读取 thead th 数量，硬编码容易错位

不是样式问题，是 DOM 状态和事件生命周期卡住了。iOS 尤其敏感，点一下键盘闪现又消失，90% 是聚焦被中断。

别急着调 CSS，先看这三处：

input 是否被设为 disabled 或 readonly（哪怕只是临时加的 class）
父容器是否用了 touch-action: none 或 user-select: none——它们会拦截 focus 事件
点击后是否立刻触发了页面滚动、DOM 重排、或 location.hash 变更，导致 input 失焦；可加 setTimeout(() => input.focus(), 0) 缓解

真正麻烦的从来不是“怎么写出来”，而是让那个小输入框，在各种嵌套层级、各种机型下，稳稳弹出键盘、接受输入、不丢焦点。细节都在 DOM 状态和事件时机里，不在样式表里。