为何初始disabled的输入框提交表单后退后无法保留输入内容？

原因 #

浏览器的表单数据恢复机制（返回时自动填充之前输入的内容），只会处理**初始状态为可用（非disabled）**的输入框。你的field2一开始设置了disabled="disabled"，浏览器加载页面时就标记它为不可用状态，哪怕后续通过JS移除了disabled并填入内容，返回时浏览器也不会恢复这个输入框的值——因为它的初始状态是禁用的，不在浏览器自动恢复的范围内。

解决办法 #

这里提供两种实用方案：

方案1：用readonly替代disabled作为初始状态

将field2的初始属性改为readonly，readonly状态的输入框无法编辑，但属于可用状态，浏览器会正常保留它的值。之后在field1获得焦点时移除readonly属性即可：

<script>
var field1 = document.querySelector("#field1")
var field2 = document.querySelector("#field2")

field1.addEventListener('focus', function (e) {
    field2.removeAttribute("readonly")
})
</script>
<form action="/" method="POST">
    <input id="field1" name="field1" required="" type="text" value="">
    <input readonly="readonly" id="field2" name="field2" type="text" required="" value="">
    <input id="submit" name="submit" type="submit" value="Save">
</form>

方案2：页面加载时手动恢复field2的状态与值

如果必须保留disabled初始状态，可以在页面加载时，手动检查浏览器是否已恢复field2的值（浏览器实际会将值存在DOM中，但不会显示），若有值则移除disabled属性：

<script>
var field1 = document.querySelector("#field1")
var field2 = document.querySelector("#field2")

// 页面加载后处理
window.addEventListener('load', function() {
    if (field2.value) {
        field2.removeAttribute("disabled")
    }
})

field1.addEventListener('focus', function (e) {
    field2.removeAttribute("disabled")
})
</script>
<form action="/" method="POST">
    <input id="field1" name="field1" required="" type="text" value="">
    <input disabled="disabled" id="field2" name="field2" type="text" required="" value="">
    <input id="submit" name="submit" type="submit" value="Save">
</form>

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