如何通过HTMX触发Enter键提交AJAX请求？

你的代码里hx-trigger="click[enterKey]"是错误的，这不是HTMX识别的触发规则，所以无法生效。下面是两种正确的实现方案：

方案一：利用Form默认提交行为（推荐） #

HTMX会自动拦截form的submit事件，而在form内的输入框按下Enter键时，浏览器会默认触发form的提交。只需要移除错误的hx-trigger配置，保留其他HTMX属性即可：

<form class="align-items-center row" th:action="@{/addTask}"
    method="post" th:object="${formData}" hx-post="/todo/addTask"
    hx-include="#pageSize" hx-target="#result" hx-swap="innerHTML">
    <div class="col-auto">
        <label>Item :</label>
    </div>
    <div class="col-auto">
        <input id="task" type="text" class="form-control"
            placeholder="Tasks..." th:field="*{task}" />
    </div>
    <div class="col-auto">
        <input type="submit" class="btn btn-primary" />
    </div>
</form>

这样配置后，无论是点击提交按钮，还是在输入框按下Enter键，都会触发HTMX的AJAX请求。

方案二：直接监听Enter键（适用于非Form场景或自定义触发） #

如果需要在单个输入框（不在form中）或者更精确控制触发时机，可以直接给输入框添加HTMX属性，监听Enter键事件：

<input id="task" type="text" class="form-control"
    placeholder="Tasks..." th:field="*{task}"
    hx-post="/todo/addTask"
    hx-include="#pageSize"
    hx-target="#result"
    hx-swap="innerHTML"
    hx-trigger="keydown[key=='Enter']" />

这里使用keydown[key=='Enter']作为触发条件，当按下Enter键时直接发起AJAX请求。

注意：如果使用方案二，建议移除form上的HTMX属性，避免重复触发请求。

内容的提问来源于stack exchange，提问作者Vinay Mhatre