Question

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

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

我创建了一个小提琴，可以告诉你我的意思。

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比其他浏览器更符合标准。

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

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

1 个答案: