javascript – 具有当前表单值的innerHTML

需要.inner HTML功能,但使用当前表单字段值包括输入,选择(选定选项)和textarea.

所以,给定：

<form id=f>
  <input type=text name=x />
  <select name=y>
    <option value='1'>one</option>
    <option value='2'>two</option>
  </select>
</form>

如果用户输入123,并选择选项2,则正常的f.innerHTML返回：

<input type=text name=x />
<select name=y>
  <option value='1'>one</option>
  <option value='2'>two</option>
</select>

我希望f.magicInnerHTML返回：

<input type=text name=x value='123' />
<select name=y>
  <option value='1'>one</option>
  <option value='2' selected>two</option>
</select>

反映当前的形式值.

解决方法

我想这就是你要找的东西：
JSFiddle link

在此示例中,使用所有已更改的属性及其值警告表单的“magic”innerHTML.我使用了jquery getAttributes plugin.这是代码,而不是插件代码：

function magicHTMLloop($el,s,notfirst){
    if (notfirst) {
        s += '<' + $el.get(0).tagName.toLowerCase();

        var attrs = $.getAttributes($el);

        for (var i in attrs){
            s += ' ' + i + '="' + $el.attr(i) + '"';
        }
        s += '>';
    }

    $el.children().each(function(){
        s += magicHTMLloop($(this),'',true);
    });

    if ($el.children().length && notfirst){
        s += '</' + $el.get(0).tagName + '>';
    }
    return s;
}

function magicHTML($el) {
    return magicHTMLloop($el,false);
}

// This is the example usage:

$('input').change(function(){
    var v = magicHTML($('form'));
    alert(v);
});

这有一些您可能想要考虑的边缘情况,例如值中的引号(这将导致无效的HTML) – 但我确信您可以自己逃避,如果有必要的话.如您所见,magicHTML函数的输出是更新的innerHTML：

<input type="text" name="x" value="this is the changed value">