jQuery .append（）在编辑文本后不附加到textarea [英] jQuery .append() not appending to textarea after text edited
问题描述
请参阅以下页面：
<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>
我期望的行为，我希望实现的是当我点击其中一个时 divs 与类 hashtag 他们的内容（分别为#one和#two）将附加在 text-box 。
The behavior I would expect, and that I want to achieve is that when I click on one of the divs with class hashtag their content ("#one" and "#two" respectively) would be appended at the end of the text in textarea text-box.
当我点击后面的哈希标签时会发生这种情况页面加载。然而，当我然后手动开始编辑文本框中的文本，然后返回点击任何他们没有附加在Firefox上的主题标签。在Chrome上，最奇怪的事情正在发生 - 我手动输入的所有文本都会被新的主题标签取代并消失。
This does happen when I click on the hash tags just after the page loads. However when I then also start editing the text in text-box manually and then go back to clicking on any of the hashtags they don't get appended on Firefox. On Chrome the most bizarre thing is happening - all the text I type manually gets replaced with the new hashtag and disappears.
我可能正在做这里有一些非常错误，所以如果有人可以在这里指出我的错误，以及如何解决这个问题，我将不胜感激。
I probably am doing something very wrong here, so I would appreciate if someone can point out my mistake here, and how to fix that.
谢谢。
推荐答案
2件事。
首先，< textarea /> 不是有效标签。 < textarea> 标签必须使用完整的< / textarea> 结束标记完全关闭。
First, <textarea/> is not a valid tag. <textarea> tags must be fully closed with a full </textarea> closing tag.
其次， $（textarea）.append（txt）不能像您想象的那样工作。加载页面时，textarea中的文本节点将设置该表单字段的值。之后，可以断开文本节点和值。当您在字段中键入时，值会更改，但DOM上的文本节点不会更改。然后使用append（）更改文本节点，浏览器会删除该值，因为它知道标记内的文本节点已更改。
Second, $(textarea).append(txt) doesn't work like you think. When a page is loaded the text nodes inside the textarea are set the value of that form field. After that, the text nodes and the value can be disconnected. As you type in the field, the value changes, but the text nodes inside it on the DOM do not. Then you change the text nodes with the append() and the browser erases the value because it knows the text nodes inside the tag have changed.
所以你想设置价值，你不想追加。使用jQuery的val（）方法。
So you want to set the value, you don't want to append. Use jQuery's val() method for this.
$(document).ready(function(){
$(".hashtag").click(function(){
var txt = $.trim($(this).text());
var box = $("#text-box");
box.val(box.val() + txt);
});
});
工作示例：
http://jsfiddle.net/Hhptn/
这篇关于jQuery .append（）在编辑文本后不附加到textarea的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
