Bootstrap button 中的 autocomplete="off" 是什么意思？

在浏览 bootstrap 的文档时，我们会发现一些这样的例子。

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

明明是一个 button，button 都没有值，为什么还加上 autocomplete="off" 呢？

原因

经过一番探索，在 button 加上 autocomplete="off"，是因为在 Firefox 浏览器下，按钮通过 JS 禁用后，在页面跳转后仍然会是禁用状态。而 Bootstrap 提供了一种方法，可以设置 autocomplete="off" 关闭这个“功能”。

<div>
  <button id="test-1" type="button">按钮</button>
</div>

<p>重现步骤</p>
<p>Firefox 浏览器下按顺序点击步骤，可重现。</p>
<ol>
  <li><a href="/examples/test-firefox-form-control-disable-issue/result.html" target="_blank">新窗口打开实例</a>
  <li><a href="#" onclick="document.getElementById('test-1').disabled = true;document.getElementById('test-2').disabled = true;">禁用按钮</a></li>
  <li><a href="?test=1">跳转到下一个页面</a></li>
  <li><a href="javascript:history.back()">返回原来的页面，可看到按钮还是禁用状态</a></li>
</ol>

尝试一下 »

另外，除了禁用之外，选中状态也会有这样的问题。而且不仅仅是 button，其他的表单控件也是存在这样的问题。

其他解决办法

如果是 Firefox 新版，如 53.0.3，加上 autocomplete="off" 没有效果，还可以通过以下的方式解决。

方法1：将 button 改为 a 元素来避开这个问题

如果是 input 则不行。

方法2： 通过 JS 控制按钮的状态

<script>
  window.addEventListener('pageshow', PageShowHandler, false);
  window.addEventListener('unload', UnloadHandler, false);

  function PageShowHandler() {
    window.addEventListener('unload', UnloadHandler, false);
  }

  function UnloadHandler() {
    // enable button here
    window.removeEventListener('unload', UnloadHandler, false);
  }
</script>

相关链接