Question

我有一个表格的网站。该表单由用户填写，例如我向用户显示的数据：

 <input type='text' value="" name="dsa" />

他用“3”的值填充它;

然后点击“保存”按钮。现在我想拥有网站的整个HTML，包括字段的值。所以我用：

document.documentElement.innerHTML

但我明白了：

 <input type='text' value="" name="dsa" />

但我希望得到这个：

 <input type='text' value="3" name="dsa" />

注意我想要获取网站的整个HTML，而不仅仅是一个字段。我不知道网站上会有哪些字段，所以我需要一个通用的解决方案。

Answer 1

AFAIK您无法从HTML代码中获取此信息，因为当用户在输入文本字段中输入内容时，HTML代码不会更改。

您可以做的是获取页面上的所有输入字段，并使用以下内容获取其值：

var inputs, index;

inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

代码来自这篇文章：https://stackoverflow.com/a/2214077/312312 我懒得把它写下来：P

Answer 2

在jQuery中我做

$(function() {
    $('input').keyup(function() {
       $(this).attr('value', $(this).val());
    }); 

});

因为在键盘加载后没有设置value属性

Answer 3

您可以尝试在整个文档上设置实时事件，该文档将使用用户设置的值设置属于html，或者在提交时设置它们。

第一种方式，例如

$("body").on("change", "select,input,textarea", function(){
  $(this).attr("value", $(this).val());
});

但这不应该盲目地做，你会遇到重置问题。你应该用选定的收音机，复选框和其他属性解决问题，而不仅仅是值。

第二种方法是在真正需要时序列化整个页面。

var serialize = function(el){
   $("select, input, textarea").each(function(){
     $(this).attr("value", $(this).val()); //the same way as upper
   });
}
$(".serialize").click(function(){
  var inner = $("body"),
      html;
  serialize(inner);
  html = inner.html(); //here you will get whole html with setted attributes
});

这种方式似乎更好，因为不会有不必要的事件。

http://jsfiddle.net/CeAXL/2/ - 测试示例。

但是在这两种方式中，为DOM本身设置永久值并不是一个好主意。

如何通过JS获取网站的实际HTML代码？

3 个答案: