javascript - innerHTML 在 Firefox 中无法正常工作？

Question

我正在使用 JavaScript 设置表单字段的值。现在，当我使用innerHTML 选择该字段的HTML 内容时，该值消失了。 这是代码。

function test() {
  document.getElementById("fname").value = "Deepak";
}

function test2() {
  alert(document.getElementById("testform").innerHTML);
}

<form id="testform">
  <input type="text" name="fname" id="fname">
</form>
<input type="button" value="Set Value" onclick="test()">
<input type="button" value="Show Inner HTML" onclick="test2()">

我不能在此使用 jquery，所以只能使用 JS 来完成。 输出应该是<input name="fname" id="fname" type="text" value="Deepak"> 但目前显示，<input name="fname" id="fname" type="text">

有什么办法可以解决这个问题吗？这在 IE 上运行良好。

Answer 1

您在 FireFox 中观察到的行为是正确的行为。更改输入的值不应更改其 value 属性(如果它有的话)。较新版本的 IE 的行为方式与 FireFox 相同，而较旧版本的 IE 有一个您的代码所依赖的错误。您可以在 DOM level 2 spec 中看到这一点:

Changing [the value property] changes the contents of the form control, but does not change the value of the HTML value attribute of the element.

如果我没记错的话，您应该能够将 DOM 节点直接传递给 Modalbox.show():

Modalbox.show(document.getElementById('RAForm'), {title: 'Create RA', width:700});

所以请尝试一下。我相信这应该可以解决您的问题。