使用 INPUT 标签的 VALUE 属性(及其值)读取 HTML 表单的 innerHTML

Posted

技术标签:

【中文标题】使用 INPUT 标签的 VALUE 属性(及其值)读取 HTML 表单的 innerHTML【英文标题】:reading innerHTML of HTML form with VALUE attribute (& its value) of INPUT tags 【发布时间】:2011-11-27 22:44:08 【问题描述】:

我有一个带有一些输入字段的html form

不是通过document.ipForm.userName.value 读取和发送input 字段的值,我需要将整个html 内容发送到html 解析器并通过其他一些程序提取每个输入字段的<name ,value> 对(以及其他信息也)。

但是当我在 javascript 中执行此操作时(我想要纯 JavaScript-而不是其他库)

var contents=document.getElementById("formArea").innerHTML;
alert(contents);

即使我输入了一些值,它不显示<input/> 字段中的value="enteredValue"

我的 HTML 文件:

<html>
<head>
    <script type="text/javascript">
    function showInnerHtml()
        var contents=document.getElementById("formArea").innerHTML;
        alert(contents);
    
    </script>
</head>
<body>
    <div id="formArea">
        <form name="ipForm" >
          UserName : <input type="text" name="userName"> 
        </form>
    </div>
    <div> other contents.....   </div>
    <div onclick="showInnerHtml()">Show InnerHTML</div>
</body>
</html>

是我遗漏了什么还是不可能的。

别叫我疯子。但我正在与这种奇怪的情况作斗争。

【问题讨论】:

据我所知,.innerHTML 中的value="" 内容永远不会反映页面加载后您在输入字段中输入的内容。它只会包含页面加载时 value="" 中存在的内容。 【参考方案1】:

那是因为value是文本框填写时的属性,而不是属性。这意味着 .value 可以正常工作,但它不是作为属性的实际 DOM 的一部分(如 &lt;input value="..."&gt;)。

您需要明确设置:

document.getElementById("html").onclick = function() 
  var elems = document.getElementsByName("ipForm")[0]
    .getElementsByTagName("input");

  for (var i = 0; i < elems.length; i++) 
    // set attribute to property value
    elems[i].setAttribute("value", elems[i].value);
  

  alert(document.getElementsByName("ipForm")[0].innerHTML);
;
<form name="ipForm">
  UserName : <input type="text" name="userName">
</form>
<button id="html">get innerHTML</button>

View on jsFiddle

【讨论】:

【参考方案2】:

你也可以写一个输入来改变他的属性,像这样:

(...)

UserName : <input type="text" name="userName" onChange="this.setAttribute('value', this.value);"> 

对于复选框:

onClick="if (this.checked)  this.setAttribute('checked', null);  else  this.removeAttribute('checked'); "

享受:)

【讨论】:

以上是关于使用 INPUT 标签的 VALUE 属性(及其值)读取 HTML 表单的 innerHTML的主要内容,如果未能解决你的问题,请参考以下文章

HTML,怎样在input标签的value属性放进对象?

JS操作标签的值属性样式。

jquery通过name,id名称获取当前value值

input标签

HTMLHTML 表单 ① ( input 表单控件 | input 标签语法 | input 标签属性 | type 属性 | value 属性 | name 属性 | checked 属性 )

如何定义input标签中 type="text"的CSS样式