如何在纯JS无刷新表单中启用input的autocomplete功能？

问题场景 #

当前有一个带autocomplete="on"属性的表单，提交时通过WebSocket发送输入内容，使用e.preventDefault()阻止页面刷新后，浏览器自动补全功能失效；移除该代码则页面会刷新。需要实现不刷新页面且保留输入框自动补全的效果。

现有表单代码 #

<!-- messenger -->
<form id="messenger_form" action="?">
  <div class="container-fluid px-0 pt-5">
    <div class="input-group mb-3">
      <span class="input-group-text">Messenger</span>
        <input type="text" autocomplete="on" class="form-control" id="messenger" name="messenger" placeholder="setLedBrightness:64, sendToApi:foo=bar&baz=qux, rf@to:cmd">
    </div>
  </div>
</form>

原有JS代码 #

var messenger_el = document.getElementById("messenger");
var messenger_form = document.getElementById("messenger_form");

// ...

messenger_form.addEventListener("submit", function(e) {
  e.preventDefault();
  socket.send(messenger_el.value);
  messenger_el.value = "";
});

解决方案 #

浏览器自动补全功能依赖于表单提交的完成信号，直接调用e.preventDefault()会让浏览器认为表单未提交，从而不记录输入历史。以下两种方法可解决该问题：

方法一：延迟清空输入框 #

给浏览器预留足够时间记录自动补全内容，再清空输入框：

var messenger_el = document.getElementById("messenger");
var messenger_form = document.getElementById("messenger_form");

// ...

messenger_form.addEventListener("submit", function(e) {
  e.preventDefault();
  
  const inputValue = messenger_el.value.trim();
  if (!inputValue) return; // 空内容不处理

  socket.send(inputValue);

  // 延迟200ms清空输入框，确保浏览器完成自动补全记录
  setTimeout(() => {
    messenger_el.value = "";
  }, 200);
});

方法二：模拟表单提交的URL变化 #

通过修改URL模拟表单提交后的地址变化，让浏览器识别为提交完成，同时延迟清空输入框：

var messenger_el = document.getElementById("messenger");
var messenger_form = document.getElementById("messenger_form");

// ...

messenger_form.addEventListener("submit", function(e) {
  e.preventDefault();
  
  const inputValue = messenger_el.value.trim();
  if (!inputValue) return;

  socket.send(inputValue);

  // 修改URL模拟表单提交后的状态，帮助浏览器记录自动补全
  history.replaceState({}, "", window.location.pathname + "?messenger=" + encodeURIComponent(inputValue));

  // 延迟清空输入框
  setTimeout(() => {
    messenger_el.value = "";
  }, 100);
});

额外优化建议 #

• 可将输入框的autocomplete属性设置为更具体的值（如autocomplete="messenger"），帮助浏览器更精准匹配自动补全类型；
• 确保输入框的name属性正确设置，这是浏览器识别自动补全字段的关键标识。

内容的提问来源于stack exchange，提问作者Musa P.