javascript - 输入元素将类型切换为隐藏时的奇怪行为

Question

我发现输入文本/隐藏元素有一种奇怪的行为，我想知道为什么会这样。

我有一个输入文本框，它有一个值，比方说“测试”。我删除了输入元素值并将此元素的类型更改为“隐藏”。如果现在我将其切换回“文本”，原始值就在那里!如果您没有完全删除文本元素的值而是更改它，您的更改将被保留。为什么如果您清除元素值，则不会保留此更改？

我创建了一个 fiddle ，可以向您展示我的意思。

function toggler() {
  var iobj = document.getElementById('test');
  if (iobj.type == 'text') {
    iobj.type = 'hidden';
  } else {
    iobj.type = 'text';
  }
}

<button name="toggle" type="button" onclick="toggler()">Toggle</button><br /><br />
<input type="text" name="test" id="test" value="sample" />

Answer 1

这与不同的浏览器如何处理输入的 defaultValue 属性有关，每当它们的 type 发生变化时。在这种情况下，当输入 type 更改且 .value 为空时，Firefox 使用最后一个非空值作为 .defaultValue 属性的输入。当类型更改为 text 时，Firefox 使用 .defaultValue 属性来设置输入的当前 .value 属性。 Chrome 不会这样做，即它使用最后一个值(空值或非空值)作为 .defaultValue。

Here is a demo on jsfiddle .比较 Firefox 和 Chrome 控制台上的记录值，应该可以证明不同的行为。

我还应该提到，根据我的经验/知识，Firefox 比其他浏览器更符合标准。

话虽如此，改变输入的类型从来都不是一个好主意。表单元素非常不同，浏览器以不同的方式处理这种情况。