我有一个由单元格组成的表格，如下所示

<td>
  <input
    type="text"
    name="place" id="place-bb0a9449-c9d6-436f-aa6c-d3ed9c98f7ff"
    value="A"
    hx-post="/UpdatePlace?id=bb0a9449-c9d6-436f-aa6c-d3ed9c98f7ff&amp;nextId=d440b2e3-507d-498f-a7f2-af39c7b019f9"
    hx-swap="outerHTML"
    hx-trigger="keyup[key=='Enter'], blur"
    />
</td>

当我重新加载时，行会基于数值重新排序。所以具有这个id的单元格可能会发生位移。 然而，当我刚编辑的单元格被移动时，会发生一件怪事：最终落到这个位置的新单元格会获得我编辑过的单元格的值。例如：

之前：

| id | value |
|----+-------|
|  1 | A     |
|  2 | A     |
|  3 | A     |
|  4 | A     |
|  5 | A     |

编辑后并离开该字段、在重新加载前：

| id | value |
|----+-------|
|  1 | A     |
|  2 | A     |
|  3 | B     |
|  4 | A     |
|  5 | A     |

请注意，离开该字段（或按回车）会提交 /UpdatePlace，我在数据库中看到的字段值与上面的表格一致。

然后我在浏览器中按ctrl+r（软刷新，而非硬刷新），我看到

| id | value |
|----+-------|
|  1 | A     |
|  2 | A     |
|  5 | B     | <- the cell position in the table
|  4 | A     |
|  3 | B     | <- the value I changed

数据库里仍然只包含一个B。因此问题在于浏览器。

返回的HTML也同样只包含一个B（id 3）。

所以在软刷新时浏览器有一些问题。

这个项目同时使用htmx来替换单元格。

如果我禁用htmx——或者移除hx-post属性——并在数据库中手动修改，软刷新会按应有的方式反映更改。

所有输入框都有id，因此如果htmx在缓存，理论上应该会把旧的编辑值放到具有相应id的输入框里，对吗？

解决方案

这根本就不是htmx相关，而是浏览器在试着帮忙，根据在html中的位置，对先前输入的值进行自动完成（忽略了 id 已经改变这一点）。

真正有帮助的是在 <input> 元素中添加 autocomplete="off"：

<td>
  <input
    autocomplete="off"
    type="text"
    name="place" id="place-bb0a9449-c9d6-436f-aa6c-d3ed9c98f7ff"
    value="A"
    hx-post="/UpdatePlace?id=bb0a9449-c9d6-436f-aa6c-d3ed9c98f7ff&amp;nextId=d440b2e3-507d-498f-a7f2-af39c7b019f9"
    hx-swap="outerHTML"
    hx-trigger="keyup[key=='Enter'], blur"
    />
</td>

现在重新加载时，它会显示服务器发送的内容，而不是重新加载前第n 行表格字段中的值。

（我也尝试移除 name 字段并改用 hx-vals，但至少在Firefox上没有帮助，也不能通过将其包裹在 <form> 来让它稳定工作。）