HTMX 中使用 hx-on 检测 Enter 键并执行函数的正确写法-js教程-PHP中文网

HTMX 中使用 hx-on 检测 Enter 键并执行函数的正确写法

在 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 判断。