Firefox（使用.innerHTML）中的jQuery html（）忽略DOM更改_Jquery_Html_Firefox_Dom_Innerhtml

Firefox（使用.innerHTML）中的jQuery html（）忽略DOM更改

jquery html firefox dom

Firefox（使用.innerHTML）中的jQuery html（）忽略DOM更改,jquery,html,firefox,dom,innerhtml,Jquery,Html,Firefox,Dom,Innerhtml,我真的很惊讶我以前没有遇到过这个问题，但是对元素调用jQueries.html（）函数似乎忽略了DOM中的更改，即它返回原始源中的html。我不这样做。html（）只在内部使用innerHTML属性这是注定要发生的吗？我使用的是Firefox 3.5.2。下面是一个示例，无论您将textbox值更改为什么，“container”元素的innerHTML都只返回HTML标记中定义的值。示例使用jQuery并不仅仅是为了简化它（使用jQuery的结果是一样的）是否有人有办法让我获得容器当前状态下

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

这是注定要发生的吗？我使用的是Firefox 3.5.2。下面是一个示例，无论您将textbox值更改为什么，“container”元素的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>

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

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

Firefox不会根据用户输入更新DOM对象的

值

属性，只会更新其

值

属性——存在相当快的解决方法

DOM:

使

.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);

我知道你的问题与

innerHTML

有关，但是如果它只是

textbox

inner

container

中你需要的值，那么

$('#textbox').val()

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

感谢您的formhtml插件。为了与

textarea

一起使用，我必须更新它：

$("textarea", this).each(function() { 
  $(this).text($(this).val()); 
});

另一种DOM方法是在特定元素上设置

defaultValue

——借用投票答案中的相同代码

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

应该打印更新的innerHTML

jQuery的解决方案更好，因为它附加到所有输入元素，而不是特定的元素。这也可以使用“DOM only”来完成，它将涉及迭代DOM以检测所有输入元素，并在所有输入元素上添加

onChange

方法调用。如果您不知道页面上的字段。

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

  // 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;
  }

你的插件对所有控件都很好，但它对FF中的Textarea不起作用：-（…你是否更改了任何东西使其工作？已经添加了1，因为这对我帮助很大：-）这很好，但我需要使用下面的@Dr Fred的调整。将textarea的innerHTML设置为其值会丢失换行符和任何其他额外的空白。使用@Dr Fred的更改进行更新是有意义的。我使用@gnarf的答案进行此调整，以保留textarea中的所有空白（或足够接近…$this.text（this.value））谢谢，希望您建议在此处进行编辑！我改变了我的答案，将其纳入其中。

  // 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;
  }