HTMX输入在重载且行重排时获取错误值问题排查

这是HTMX的DOM缓存机制导致的问题——HTMX默认会基于元素在DOM中的位置缓存输入值，而非通过唯一ID匹配。当页面重载后行的位置因排序发生变化时，HTMX会把旧位置的缓存值回填到新位置的元素上，进而出现值错位的情况。

具体解决方法 #

• 单个输入禁用缓存：给目标输入框添加 hx-preserve="false" 属性，强制HTMX不缓存该输入的值，重载时直接使用服务端返回的HTML值。

  <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"
      hx-preserve="false"
    />
  </td>
  

• 全局关闭输入缓存：如果所有动态排序的输入都存在这个问题，可以在页面全局配置HTMX，关闭输入值的自动缓存：

  document.addEventListener('htmx:configRequest', function(evt) {
    evt.detail.config.preserveInputValues = false;
  });
  

原理说明 #

HTMX的preserveInputValues默认值为true，它会在页面重载（包括软重载）时，根据元素在DOM中的索引位置保存和恢复输入值。但你的表格行是动态排序的，重载后元素的DOM位置和之前的缓存索引不匹配，就导致了错误的值回填。通过hx-preserve="false"或者全局关闭该配置，就能让HTMX不再干预输入值，完全使用服务端返回的HTML内容。

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