21

我真的很惊讶我以前没有遇到过这个问题，但似乎在元素上调用 jQueries .html() 函数会忽略 DOM 中的更改，即它返回原始源中的 HTML。IE 不这样做。jQueries .html() 只是在内部使用 innerHTML 属性。

这是注定要发生的吗？我在 Firefox 3.5.2 上。我在下面有一个示例，无论您将文本框值更改为什么，“容器”元素的 innerHTML 都只会返回 HTML 标记中定义的值。该示例不使用 jQuery 只是为了使其更简单（使用 jQuery 的结果是相同的）。

有没有人可以解决我可以在其当前状态下获取容器的 html 的方法，即包括对 DOM 的任何脚本更改？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <script type="text/javascript">
            <!--
            function BodyLoad(){                
                document.getElementById("textbox").value = "initial UPDATE";
                DisplayTextBoxValue();
            }

            function DisplayTextBoxValue(){
                alert(document.getElementById("container").innerHTML);             
                return false;
            }
            //-->
        </script>
    </head>
    <body onload="BodyLoad();">
        <div id="container">
            <input type="text" id="textbox" value="initial" />
        </div>
        <input type="button" id="button" value="Test me" onclick="return DisplayTextBoxValue();" />
    </body>
</html>
4

6 回答 6

37

Firefox 不会根据用户输入更新 DOM 对象的value 属性，仅更新其value 属性- 存在相当快速的解决方法。

DOM：

function DisplayTextBoxValue(){
  var element = document.getElementById('textbox');
  // set the attribute on the DOM Element by hand - will update the innerHTML
  element.setAttribute('value', element.value);
  alert(document.getElementById("container").innerHTML);             
  return false;
}

.formhtml()自动执行此操作的 jQuery 插件：

(function($) {
  var oldHTML = $.fn.html;

  $.fn.formhtml = function() {
    if (arguments.length) return oldHTML.apply(this,arguments);
    $("input,button", this).each(function() {
      this.setAttribute('value',this.value);
    });
    $("textarea", this).each(function() {
      // updated - thanks Raja & Dr. Fred!
      $(this).text(this.value);
    });
    $("input:radio,input: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);
于 2009-09-07T11:39:17.923 回答
6

这是 Firefox 中的一个已知“问题”。innerHTML 的规范并不完全清楚，因此不同的浏览器供应商以不同的方式实现它。

可以在此处找到有关此主题的讨论：

http://forums.mozillazine.org/viewtopic.php?t=317838#1744233

于 2009-09-07T11:36:01.123 回答
2

感谢您的 formhtml 插件。为了使用它textarea，我必须更新它：

$("textarea", this).each(function() { 
  $(this).text($(this).val()); 
});
于 2010-11-27T18:58:26.150 回答
1

我知道您的问题与 相关innerHTML，但如果它只是您需要的textboxinside的值container，那么

$('#textbox').val()

将给出正确的（更新的）文本框值。

于 2009-09-07T12:10:51.930 回答
0

另一种 DOM 方法是defaultValue在特定元素上设置 - 从投票答案中借用相同的代码。

function DisplayTextBoxValue(){
  var element = document.getElementById('textbox');
  element.defaultValue = element.value;    
  alert(document.getElementById("container").innerHTML);             
  return false;
}

那应该打印更新的innerHTML。

jQuery 的解决方案更好，因为它附加到所有输入元素而不是特定元素。这也可以使用“仅 DOM”来完成，将涉及迭代 DOM 以检测所有输入元素并onChange在所有输入元素上添加方法调用。如果您不知道 hte 页面上的字段。

于 2011-04-07T10:01:27.107 回答
0

此更新功能仅适用于未手动更改的输入字段。添加了指示的行以更新可见的输入文本：

  // set text input value from the associated sel dropdown and reset dropdown
  function set_input_value(eid, sel) {
      var el = document.getElementById(eid);
      el.setAttribute("value", sel.options[sel.selectedIndex].text);

      // added this line to solve the issue:
      el.value = el.getAttribute('value');

      sel.selectedIndex=0;
  }
于 2013-04-01T22:46:45.313 回答