Question

是否可以更改已使用<input type="text">样式隐藏的display:none的值？我有一些JS似乎在输入为<input type="hidden">时起作用，但在用display:none隐藏时则不行。和AFAIK一样，你也不能用JS改变输入的类型。

基本上，我想用<input>替换<select>，所以我试图隐藏它并附加<select>元素。

查看http://jsfiddle.net/5ZHbn/

使用firebug检查<select>元素。看看它旁边的隐藏输入。更改选择的值。隐藏的输入不会改变。萤火虫对我说谎吗？

如果你取消注释其他代码行，那么它就可以了。

实际上......我很确定现在是Firebug中的一个错误。大多数其他事情都会正确更新，但是当我检查它时，firebug不会显示更新的值。

Answer 1

我认为这是一个Firebug错误。

那是因为如果我（通过控制台）查询输入文本字段的值实际上已更新，则只是Firebug 不反映更新后的值在 html标签。

事实上，使用 dom-tab 即使新的值存在，即使 html-tab 中的实际节点值未更新。

如果您使用“通常可见的”元素（如输入类型=“文本”）或类似元素，这似乎就会发生。相反，如果您使用“通常隐藏的”元素（如输入类型=“隐藏”），Firebug会正常更新其值。

我认为这是Firebug中的一个错误，如果它通常可见但现在用css隐藏了它似乎没有更新元素的值：我特意说这个，因为输入类型=“隐藏”和 display：none仍然更新，所以它不仅仅是通过display：none隐藏的元素问题。

希望这有帮助，我即将向Firebug人员发出此错误。

更新：我在Win Srv 2K3上的Firefox 8上使用Firebug 1.8.4。

Answer 2

无论CSS样式如何，更改字段的值都应该按预期工作。问题可能在其他地方。

Answer 3

您可以照常更改：

document.getElementById( 'myinput' ).value = 'Hello';

Answer 4

我在自定义magento自定义选项字段时遇到此问题，我从一些自定义选择输入中制定了一些规则，并需要将最终值保存到隐藏的自定义选项文本字段。出于某种原因，如果该字段为'display：none'（可能是由于某些magento的js？），它不起作用，但是当我改为“visibility：hidden;”时它起作用了。

我知道我的答案是特定的，我试图发表评论，但没有足够的声誉。希望它可以帮到某人。

Answer 5

您有一个选项是将输入框放在div中，然后使用javascript更改div的内容。例如：

<html>
<head>
<title>Input Text To Dropdown Box</title>
<script type="text/javascript">
function swap() {
document.getElementById("contentswap").innerHTML = "<select><option value='cats'>Cats</option><option value='dogs'>Dogs</option></select>";
}
</script>
<style>
#contentswap {
display:inline;
}
</style>
</head>
<body
<div id="contentswap">
<input type="text" name="original">
</div>
<br />
<input type="button" value="Input To Select" onClick="swap()">
</body>
</html>

Answer 6

要使更改可见，可以通过SetAttribute设置值

var inputs = document.querySelectorAll('input');
var select = document.querySelector('select'); 
select.onchange = function () {
  inputs[0].value = select.value;
  inputs[1].setAttribute('value', select.value);
  console.log('changed by input.value: ', inputs[0]);
  console.log('changed by input.setAttribute: ', inputs[1]);
};

<input type="text" style="display: none;" value="">
<input type="text" style="display: none;" value="">
<select>
  <option>Select value</option>
  <option value="1">Value 1</option>
  <option value="2">Value 2</option>
</select>

更改显示值：无输入？

6 个答案: