Firefox中JS修改的按钮状态刷新后保留问题求非window.load解决方案

Firefox及衍生浏览器默认会保留表单控件（包括按钮）的状态，刷新页面时会恢复到用户修改后的状态，这就是按钮A刷新后仍保持启用的原因，而Chrome没有这个默认行为。以下是无需借助window.load的解决办法：

方法1：给目标按钮添加autocomplete="off"属性 #

直接给按钮A加上autocomplete="off"，就能阻止Firefox记住它的状态：

<button id="a" onclick="saluta()" disabled autocomplete="off">Test</button>

方法2：用<form>包裹控件并设置autocomplete="off" #

如果页面上有多个需要禁用状态记忆的控件，把它们放在<form>标签里，给form设置autocomplete="off"更高效：

<form autocomplete="off">
    <button id="a" onclick="saluta()" disabled>Test</button>
    <button id="b" onclick="enableA()">Enable A</button>
</form>

修改后的完整代码示例 #

<html>
    <head>
    <title>Test</title>
    <style>
        button {
            display: inline-block;
            outline: 0;
            border: none;
            cursor: pointer;
            font-weight: 600;
            border-radius: 4px;
            font-size: 13px;
            height: 30px;
            background-color: #9147ff;
            color: white;
            padding: 0 20px;
        }
        button:hover {
            background-color: #772ce8;
        }
        button:disabled {
            background-color: #6433ae;
        }        
        body{
            background-color: black;
        }
    </style>
</head>
<body>
    <button id="a" onclick="saluta()" disabled autocomplete="off">Test</button>
    <button id="b" onclick="enableA()">Enable A</button>
    
    <script>
        function enableA(){
            let buttonA = document.getElementById('a');
            buttonA.disabled = false;
            alert("Button 'Test' enabled");
        }
        function saluta(){
            alert("Hi!");
        }
    </script>
</body>
</html>

原理：Firefox的状态恢复属于浏览器自动填充/表单状态记忆的范畴，autocomplete="off"会告诉浏览器不要保存或恢复该元素（或表单内元素）的状态，从而让按钮在刷新后回到初始的禁用状态。

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