次のページをご覧ください。
<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>
私が期待し、実現したい動作は、div要素クラスによって、hashtagその内容（それぞれ「#one」と「#two」）がテキストの末尾に追加されます。テキストエリア text-box。
これは、ページが読み込まれた直後にハッシュタグをクリックしたときに発生します。ただし、その後にtext-box手動でテキストを編集し、ハッシュタグのいずれかをクリックしても、Firefox ではハッシュタグは追加されません。Chrome では、最も奇妙なことが起こります。手動で入力したテキストはすべて新しいハッシュタグに置き換えられ、消えてしまいます。
おそらく私はここで何か非常に間違ったことをしていると思いますので、誰かが私の間違いを指摘し、それを修正する方法を教えていただければ幸いです。
ありがとう。
ベストアンサー1
2つあります。
まず、<textarea/>有効なタグではありません。タグは完全な終了タグ<textarea>で完全に閉じられる必要があります。</textarea>
2 番目は、$(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);
});
});