设置input元素为hidden类型并赋值空字符串时值回退的原因咨询

这个现象的核心原因是浏览器在切换input类型时，会根据元素的defaultValue（即HTML初始定义的value属性值）来重置当前值，具体逻辑拆解如下：

先明确两个关键属性： #

• value：input的当前实际值，可随时修改
• defaultValue：input在HTML中最初定义的value属性值，修改text类型的input的value会同步更新defaultValue，但hidden类型的input修改value不会改变它

逐段分析你的代码： #

初始HTML：

<input id="input" type="hidden" value="test">

此时el.defaultValue = "test"，el.value = "test"。

1. 第一段代码：

var el   = document.getElementById('input');
el.type  = 'text';
el.value = '';
console.log('1', el.value); // 输出空字符串，当前value被设为空
el.type  = 'hidden';
console.log('2', el.value); // 输出"test"

切换到hidden类型时，浏览器检测到当前value为空，就会用defaultValue（初始的"test"）来填充，所以值回退了。

2. 第二段代码：

el.type  = 'text';
el.value = 'hello';
console.log('3', el.value); // 输出"hello"
el.type  = 'hidden';
console.log('4', el.value); // 输出"hello"

切换回text类型后，设置value="hello"，此时defaultValue会被同步更新为"hello"（因为text类型的input修改value会同步更新默认值）。切换到hidden时，当前value是"hello"（非空），浏览器不会触发重置逻辑，保持当前值。

3. 第三段代码：

el.type  = 'text';
el.value = '';
console.log('5', el.value); // 输出空字符串
el.type  = 'hidden';
console.log('6', el.value); // 输出"hello"

再次切换到text类型设为空值，此时defaultValue已经是"hello"了。切换回hidden时，当前value为空，浏览器又用defaultValue（现在是"hello"）填充，所以值回退到"hello"。

验证小技巧： #

你可以在每次操作后打印el.defaultValue，就能直观看到它的变化：

console.log(el.defaultValue); // 初始是"test"，设value="hello"后变成"hello"

内容的提问来源于stack exchange，提问作者You Old Fool