限制htmx请求触发条件：表单回车误触发按钮问题

问题分析 #

核心原因是HTML里的<button>元素默认type为submit，即便给这些按钮加了hx-trigger="click"限制htmx触发条件，浏览器在表单内按下回车时，仍会自动触发第一个可见的submit类型按钮的点击事件，导致回车依次触发删除按钮、添加按钮，而非预期的提交按钮。

解决方案 #

给所有非提交功能的按钮添加type="button"属性，明确告知浏览器这些按钮不是提交按钮，避免回车时被误触发。

修改后的代码如下：

<form action="/api/test" method="post">
    <label for="name">Name:</label>
    <input
        type="text"
        id="name" 
        name="name"
    />
    
    <label>Websites:</label>
    <div id="websites">
        <div id="website-{{.WebsiteId}}" class="flex my-2">
            <input 
                type="text" 
                name="website-{{.WebsiteId}}" 
            />
            <!-- 添加type="button" -->
            <button type="button" hx-swap="delete" hx-trigger="click" 
                    hx-target="#website-{{.WebsiteId}}" 
                    hx-get="/input/website">X</button>
        </div>
    </div>
    <!-- 添加type="button" -->
    <button type="button" hx-get="/input/website" hx-trigger="click" hx-target="#websites" 
            hx-swap="beforeend">Add Website</button>
    <div class="flex sm:flex-row flex-col">
        <button type="submit">Add</button>
    </div>
</form>

原理说明 #

• 浏览器默认行为：表单内输入框按下回车时，会自动查找第一个type="submit"的按钮并触发其点击事件。
• 未指定type的<button>默认是submit类型，即便设置了hx-trigger="click"，浏览器触发的默认submit行为仍会间接触发按钮的点击事件，进而触发htmx请求。
• 添加type="button"后，这些按钮不再具备提交表单的默认行为，只有主动点击才会触发htmx请求，回车时浏览器只会触发唯一的type="submit"按钮（提交按钮）。

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