在 HTMX 中，hx-on:keyup[key=='Enter'] 等语法无法直接触发函数调用；正确方式是利用内联表达式结合 event.key 或 event.keyCode 进行条件判断，并在满足时执行逻辑（如 alert() 或自定义函数）。
在 htmx 中，`hx-on:keyup[key=='enter']` 等语法无法直接触发函数调用；正确方式是利用内联表达式结合 `event.key` 或 `event.keycode` 进行条件判断，并在满足时执行逻辑（如 `alert()` 或自定义函数）。
HTMX 的 hx-on 事件处理器采用轻量级内联表达式求值机制，不支持 CSS 属性选择器式语法（如 keyup[key=='Enter']），该写法看似直观，实则不符合 HTMX 的事件绑定规范——它并非基于浏览器原生 addEventListener 的完整事件过滤，而是通过属性名解析 + 安全表达式执行实现的。
✅ 正确做法是：使用 hx-on:keyup 绑定事件，并在表达式中显式判断按键值。HTMX 在 hx-on:* 表达式中自动注入 event 对象（注意：需 HTMX ≥ 1.9.0；若使用 2.x，请确保语法为 hx-on:keyup 而非已废弃的 hx-on 单属性），因此可安全访问 event.key、event.code 或 event.keyCode：
<input
type="text"
name="description"
placeholder="task"
id="field-description"
hx-on:keyup="event.key === 'Enter' && alert('foo')"
hx-on:keyup="event.key === 'Enter' && mySubmitHandler()"
>? 提示：推荐使用
event.key === 'Enter'（语义清晰、兼容性好），而非已弃用的keyCode。keyCode在现代标准中已被标记为非标准，且在部分输入法/组合键场景下行为不可靠。
? 若需复用逻辑，建议将处理函数定义在全局作用域（或通过 htmx.on 注册），避免内联脚本膨胀：
<script>
function mySubmitHandler() {
const value = document.getElementById('field-description').value.trim();
if (value) {
htmx.trigger('#field-description', 'submit');
// 或直接发起请求
// htmx.ajax('POST', '/api/task', { values: { description: value } });
}
}
</script>
<input
type="text"
name="description"
placeholder="task"
id="field-description"
hx-on:keyup="event.key === 'Enter' && mySubmitHandler()"
>⚠️ 注意事项：
-
HTMX 2.x 已废弃旧版
hx-on多事件合并写法（如hx-on="keyup:handler(); change:other()"），必须拆分为独立属性（如hx-on:keyup、hx-on:change）； -
hx-on:keyup[...]形式的带方括号过滤语法 从未被 HTMX 官方支持，属常见误解；所有条件逻辑必须写在表达式体内； - 表达式中禁止使用箭头函数、
function字面量、eval()或外部变量引用（除非已挂载到window）； - 如需阻止默认行为（如表单提交），可在函数中调用
event.preventDefault()，但注意：HTMX 内联表达式不支持多语句或分号分隔，需封装为函数调用。
✅ 最佳实践总结：
用 hx-on:keyup="event.key === 'Enter' && doSomething()" 替代无效的 [key=='Enter'] 语法；将复杂逻辑封装为命名函数；升级至 HTMX 2.x 时同步检查所有 hx-on 属性命名是否符合 kebab-case 规范（如 hx-on:config-request ✅，hx-on:configRequest ❌）。
