21

以前にこの問題に遭遇したことがないことに本当に驚いていますが、要素で jQueries .html() 関数を呼び出すと、DOM の変更が無視されるようです。つまり、元のソースの HTML が返されます。IEはこれを行いません。jQueries .html() は、内部で innerHTML プロパティを使用するだけです。

これは起こることを意図していますか？私は Firefox 3.5.2 を使用しています。以下にサンプルを示します。テキスト ボックスの値を何に変更しても、"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>
4

6 に答える 6

37

Firefox は、ユーザー入力に基づいて DOM オブジェクトのvalue 属性を更新するのではなく、そのvalue プロパティだけを更新します。非常に簡単な回避策があります。

ドム:

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の値だけだった場合、textboxcontainer

$('#textbox').val()

正しい（更新された）テキストボックス値を提供します。

于 2009-09-07T12:10:51.930 に答える
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 に答える
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メソッド呼び出しを追加する必要があります。ページにあるフィールドがわからない場合。

于 2011-04-07T10:01:27.107 に答える