编辑后的文本jQuery .append不附加到textarea

进入以下页面:

<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类与他们的内容(分别为“#one”和“#two”)将被附加到textarea文本的末尾text-box

当我在加载页面之后单击散列标记时,就会发生这种情况。 然而,当我然后开始手动编辑文本text-box的文本,然后回到点击任何他们不附加在Firefox上的井号标签。 在Chrome上,最奇怪的事情正在发生 – 我手动input的所有文本被replace为新的hashtag并消失。

我可能在这里做的很不对劲,所以如果有人能指出我的错误,以及如何解决这个问题,我将不胜感激。 谢谢。

2件事。

首先, <textarea/>不是一个有效的标签。 必须使用完整的</textarea>结束标记完全closures</textarea>标记。

其次, $(textarea).append(txt)不像你想象的那样工作。 加载页面时,textarea内的文本节点被设置为该表单字段的值。 之后,文本节点和值可以断开。 当你在字段中input时,值会改变,但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/

使用val()函数:)

 <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的原因似乎并不奏效,因为textarea的值是由子节点组成的,但是按照我的Firebug的说法,将它看作多个独立节点,屏幕不会更新。 Firebug会显示更新后的子节点,但不是我手动input到textarea的文本,而屏幕显示的是手动input的文本,而不是新的节点。

你可以通过textarea的值来引用。

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

工作正常。

 if(data.quote) $('textarea#message').val($('textarea#message').val()+data.message +' ').focus();