2011-01-18 2 views
33

は以下のページテイク編集した後にテキストエリアに追加しない.append:jQueryのは、テキストが

<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"/> 
    </head> 
    <body> 
     <div class="hashtag">#one</div> 
     <div class="hashtag">#two</div> 
     <form accept-charset="UTF-8" action="/home/index" method="post"> 
      <textarea id="text-box"/> 
      <input type="submit" value ="ok" id="go" /> 
     </form> 
     <script type="text/javascript"> 
$(document).ready(function(){ 

    $(".hashtag").click(function(){ 
    var txt = $.trim($(this).text()); 
    $("#text-box").append(txt); 
    }); 
}); 
     </script> 
    </body> 
</html> 

行動私は期待をし、私が達成したいことを、私はクラスhashtagとdiv要素のいずれかをクリックしたときにということですそれらの内容(それぞれ "#one"と "#two")は、テキストエリアtext-boxのテキストの末尾に追加されます。

私はちょうどページをロードした後にハッシュタグをクリックすると、この問題が発生しません。しかし、私もtext-boxのテキストの編集を開始してから、Firefoxに追加されていないハッシュタグをクリックすることに戻ります。 Chromeでは、最も奇妙なことが起こっています。手動で入力したすべてのテキストが新しいハッシュタグに置き換えられて消えます。

私はおそらくここに非常に間違って何かをやっているので、誰かがここに私の間違いを指摘することができれば、私は感謝し、それを修正する方法。おかげさまで

答えて

69

2点。

まず、<textarea/>は有効なタグではありません。 <textarea>タグは、完全な</textarea>終了タグで完全に閉じている必要があります。

あなたが思うように第二に、$(textarea).append(txt)は動作しません。ページが読み込まれると、テキストエリア内のテキストノードにそのフォームフィールドの値が設定されます。その後、テキストノードと値を切り離すことができます。フィールドに入力すると、値は変更されますが、DOM内のテキストノードは変更されません。次に、append()を使ってテキストノードを変更すると、タグ内のテキストノードが変更されたことをブラウザが知っているので、ブラウザは値を消去します。

あなたが値を設定したいので、あなたが追加する必要はありません。これにはjQueryのval()メソッドを使います。

$(document).ready(function(){ 
    $(".hashtag").click(function(){ 
    var txt = $.trim($(this).text()); 
    var box = $("#text-box"); 
    box.val(box.val() + txt); 
    }); 
}); 

の作業例: http://jsfiddle.net/Hhptn/

+0

あなたは、私が理解するために何を望むかthatsの感謝 –

8

はヴァル()関数を使用します:)

<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
    </head> 
    <body> 
     <div class="hashtag">#one</div> 
     <div class="hashtag">#two</div> 
     <form accept-charset="UTF-8" action="/home/index" method="post"> 
      <textarea id="text-box"></textarea> 
      <input type="submit" value ="ok" id="go" /> 
     </form> 
     <script type="text/javascript"> 
$(document).ready(function(){ 

    $(".hashtag").click(function(){ 
    var txt = $.trim($(this).text()); 
    $("#text-box").val($("#text-box").val() + txt); 
    }); 
}); 
     </script> 
    </body> 
</html> 

をその助けをしていますか?

テキストエリアの値が子ノードで構成されているので、appendが機能していないように見える理由は、Firebugによると、画面が更新されない複数の別個のノードとして扱うためです。 Firebugは更新された子ノードを表示しますが、手動でテキストエリアに入力したテキストではなく、手動で入力されたテキストは表示されますが、新しいノードは表示されません。

3

あなたはテキストエリアの値によって参照することができます。

$(document).ready(function() { 
    window.document.getElementById("ELEMENT_ID").value = "VALUE"; 
}); 

function GetValueAfterChange() 
{ 
    var data = document.getElementById("ELEMENT_ID").value; 
} 

が問題ありません。

0
if(data.quote) $('textarea#message').val($('textarea#message').val()+data.message +' ').focus(); 
関連する問題