input事件才是监听内容变化的正确方式，因为keydown触发时value未更新且无法捕获粘贴、语音等非键盘输入；其仅适用于拦截按键（如enter提交、escape清空）并需用event.key判断和preventdefault。

input 标签本身不靠 keydown 实现“内容变化”的监听——它该用 input 事件；keydown 只适合拦截按键行为，比如阻止输入、识别快捷键、响应回车提交。

为什么不能用 keydown 替代 input 监听内容变化

keydown 在按键按下瞬间触发，此时 input.value 还没更新（比如按「a」时，value 仍是旧值）；它也完全捕获不到粘贴、拖放、语音输入、emoji 面板插入等非键盘操作。你看到的“实时响应”只是错觉，实际漏掉了 60% 以上的用户输入路径。

• input 事件才是语义上“用户完成一次输入动作后”的统一入口
• keydown 的正确用途是：拦截、修饰、快捷键（如 Enter 提交、Escape 清空）
• 若混用两者做同一逻辑（比如都发搜索请求），极易重复执行或状态错乱

keydown 怎么安全绑定并避免常见陷阱

必须用 event.key 判断按键，而非已废弃的 event.keyCode 或 event.which；同时记得调用 event.preventDefault() 阻止默认行为（比如回车提交表单导致页面刷新）。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

• 监听 Enter 提交搜索：if (e.key === 'Enter') { e.preventDefault(); doSearch(); }
• 监听 Escape 清空输入：if (e.key === 'Escape') { e.target.value = ''; e.target.dispatchEvent(new Event('input', { bubbles: true })); }（注意：JS 赋值不会触发 input，需手动派发）
• 不要在 keydown 里读 e.target.value 做校验——它滞后于用户意图，应改用 input 事件
• 移动端软键盘的「搜索」「下一步」按钮会触发 Enter，这点比桌面端更可靠

type="search" 的清除按钮该用哪个事件

原生 × 按钮和 Escape 键触发的是 search 事件，不是 keydown 或 input。它专为清除设计，且触发时 this.value 已为空字符串，边界清晰。

• 直接绑定：el.addEventListener('search', () => { resetState(); })
• 不要试图用 input + value.length === 0 判断清除——用户全选后按 Delete、输空格再删、JS 主动清空都会误判
• search 事件不冒泡，无法委托；多个 search 输入框需单独绑定
• Firefox 110 之前不支持，但当前（2026 年）已无需降级兼容

真正容易被忽略的是：keydown 和 input 的职责必须严格分离——前者管“按键意图”，后者管“内容结果”。混用它们写的代码，上线后总会在中文输入法、粘贴场景或移动端软键盘下突然失效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！