如何在htmx中无需JavaScript实现POST请求后元素聚焦？

要在htmx中实现请求完成后聚焦指定元素，无需编写额外JavaScript，可以通过htmx内置的hx-focus属性完成，以下是具体方案：

核心实现方法 #

你已经尝试使用hx-focus属性，只需确保配置符合htmx规则即可满足需求，以下是两种可靠实现方式：

方式1：在触发请求的按钮上直接配置hx-focus #

直接在提交按钮上指定要聚焦的元素选择器，htmx会在请求成功完成后自动聚焦该元素：

<button 
    hx-post="/api/todos" 
    hx-include="#field-description, #field-amount"
    hx-target="#todos-container" 
    hx-swap="innerHTML"
    hx-focus="#field-description"
>
    Add
</button>

关键注意点：

• 确保htmx版本在1.6.0及以上，hx-focus是该版本新增的内置属性。
• 目标元素#field-description未被请求的swap操作影响（你的代码中输入框不在#todos-container范围内，不会被替换，符合要求）。

方式2：通过服务器响应的OOB元素触发聚焦 #

如果因元素重新渲染等场景导致第一种方式不生效，可在服务器返回的HTML中添加一个OOB（Out of Band）元素，让htmx自动执行聚焦：
在返回的todos-container内容末尾添加如下代码：

<div hx-swap-oob="true" hx-focus="#field-description"></div>

这个空div会被htmx识别并触发聚焦操作，全程无需额外JavaScript。

常见问题排查 #

若hx-focus未生效，可检查以下内容：

• 浏览器控制台是否有htmx相关报错，比如元素未找到、版本不兼容等。
• 确认目标元素ID拼写完全正确（你的代码中#field-description匹配无误）。
• 若请求返回非2xx错误状态码，htmx默认不会执行后续操作，需检查接口返回状态或添加hx-on::error处理逻辑。

内容的提问来源于stack exchange，提问作者Sir Rubberduck