问题描述:input输入内容,查看html结构,value值仍是默认值,未设置默认值的情况也是空。
如果我想获取到这个变化,应该如何处理呢?
解决办法:(jquery实现)
(function ($) {
var oldHTML = $.fn.html;
$.fn.formhtml = function () {
if (arguments.length)
return oldHTML.apply(this, arguments);
$("input,textarea,button", this).each(function () {
this.setAttribute('value', this.value);
});
$(":radio,:checkbox", this).each(function () {
// im not really even sure you need to do this for "checked"
// but what the heck, better safe than sorry
if (this.checked)
this.setAttribute('checked', 'checked');
else
this.removeAttribute('checked');
});
$("option", this).each(function () {
// also not sure, but, better safe...
if (this.selected)
this.setAttribute('selected', 'selected');
else
this.removeAttribute('selected');
});
return oldHTML.apply(this);
};
//optional to override real .html() if you want
// $.fn.html = $.fn.formhtml;
})(jQuery);
通过测试:console.log($("body").formhtml()); 可以捕捉到变化:
问题解决!
结论:
- 非闭合标签(起始标记<span>,结束标记</span>)可以使用innerHTML来赋值。如:div、span。
- 闭合标签(<input /> 起始和结束都在一个标记内,不能再嵌入其他元素)要使用value来赋值:如input。
补充说明:
1、jquery使用attr("value",xxx)可以,val("xxx") 则不可以;
2、document.getElementsByTagName("html")[0].innerHTML 对应的js方式实现,
可以参考jquery的fromhtml思路,修改属性value的值。 —— do more and think more!