在 HTMX 中，hx-on:keyup 不支持带条件过滤器（如 [key=='Enter']）的语法；需改用内联表达式判断 event.key === 'Enter' 或 event.keyCode === 13，并在 HTMX ≥ 1.9.0 且使用 hx-on::keyup 双冒号语法时直接访问 event 对象。
在 htmx 中，`hx-on:keyup` 不支持带条件过滤器（如 `[key=='enter']`）的语法；需改用内联表达式判断 `event.key === 'enter'` 或 `event.keycode === 13`，并在 htmx ≥ 1.9.0 且使用 `hx-on::keyup` 双冒号语法时直接访问 `event` 对象。
HTMX 的 hx-on 事件绑定机制与原生 DOM 事件监听有本质区别：它并非通过 addEventListener 注册回调，而是采用轻量级表达式求值（expression evaluation）模型。因此，hx-on:keyup[key=='Enter'] 这类带方括号过滤器的写法在 HTMX 中完全无效——该语法属于 HTMX 的旧版（v1.x）hx-trigger 属性专属，不适用于 hx-on。
✅ 正确做法分两步：
升级语法：使用双冒号
::前缀（HTMX ≥ 1.9.0 必需）hx-on::keyup启用完整事件对象注入，使event变量在表达式中隐式可用；而旧式hx-on:keyup（单冒号）仅执行简单脚本，不暴露event。在表达式中显式判断按键
利用event.key（推荐，语义清晰、兼容性好）或event.keyCode（向后兼容）进行条件判断，并串联执行逻辑：
<input
type="text"
name="description"
placeholder="task"
id="field-description"
hx-on::keyup="event.key === 'Enter' && alert('Submitted!')"
hx-post="/tasks"
hx-target="#task-list"
hx-swap="beforeend"
>⚠️ 注意事项：
- ❌
hx-on:keyup[key=='Enter']="..."是错误写法——hx-on不解析方括号过滤器； - ❌
hx-on::keyup[key=='Enter']="..."同样非法，双冒号语法后不接受任何修饰符； - ✅
event.key === 'Enter'比keyCode === 13更现代、可读性更强，且能正确处理 IME 输入场景（如中文输入法下keyCode可能为 229）； - ✅ 若需复用逻辑，可封装为全局函数（但须确保函数已定义且无闭包依赖）：
<script> window.handleEnter = (e) => { console.log('Enter pressed on:', e.target); htmx.trigger(e.target, 'submit'); }; </script> <input hx-on::keyup="event.key === 'Enter' && handleEnter(event)" ...> - ? 如需兼容 HTMX 1.x（不支持
::），唯一可行方案是退回到hx-trigger+ 自定义事件：<input hx-trigger="keyup[enter]" hx-get="/submit" hx-target="#result" >
⚠️ 注意：
hx-trigger="keyup[enter]"是 HTMX 1.x 支持的合法语法（enter是内置别名），但该能力在 HTMX 2.x 中已被移除——2.x 统一要求使用hx-on::keyup+event.key判断。
? 最佳实践建议：
始终优先使用 hx-on::keyup="event.key === 'Enter' && yourLogic()"，它简洁、标准、可维护，并与 HTMX 2.x 生态完全对齐。避免混合旧版语法，确保升级平滑、行为可预测。
