Javascript jQuery .append() 在编辑文本后不附加到 textarea
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4722914/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .append() not appending to textarea after text edited
提问by Krzysztof Kozmic
Take the following page:
获取以下页面：
<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>
The behavior I would expect, and that I want to achieve is that when I click on one of the divswith class hashtagtheir content ("#one" and "#two" respectively) would be appended at the end of the text in textareatext-box.
我期望的行为以及我想要实现的行为是，当我单击其中一个带有 class的div 时，hashtag它们的内容（分别为“#one”和“#two”）将附加到textarea 中文本的末尾text-box。
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-boxmanually 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.
当我在页面加载后单击哈希标签时会发生这种情况。但是，当我也开始text-box手动编辑文本，然后返回单击任何主题标签时，它们不会附加到 Firefox 上。在 Chrome 上，最奇怪的事情正在发生——我手动输入的所有文本都被新的主题标签替换并消失了。
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.
我可能在这里做错了什么，所以如果有人能在这里指出我的错误，以及如何解决这个问题，我将不胜感激。
Thanks.
谢谢。
回答by Alex Wayne
2 things.
2件事。
First, <textarea/>is not a valid tag. <textarea>tags must be fully closed with a full </textarea>closing tag.
首先，<textarea/>不是一个有效的标签。 <textarea>标签必须用完整的</textarea>结束标签完全闭合。
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.
其次，$(textarea).append(txt)不像你想的那样工作。当页面加载时，textarea 内的文本节点被设置为该表单字段的值。之后，可以断开文本节点和值的连接。当您在该字段中键入时，值会发生变化，但 DOM 中的文本节点不会发生变化。然后使用 append() 更改文本节点，浏览器会删除该值，因为它知道标记内的文本节点已更改。
So you want to set the value, you don't want to append. Use jQuery's val() method for this.
所以你想设置值，你不想追加。为此使用 jQuery 的 val() 方法。
$(document).ready(function(){
$(".hashtag").click(function(){
var txt = $.trim($(this).text());
var box = $("#text-box");
box.val(box.val() + txt);
});
});
Working example: http://jsfiddle.net/Hhptn/
工作示例：http: //jsfiddle.net/Hhptn/
回答by Pim
Use the val() function :)
使用 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>
Does that help?
这有帮助吗？
The reason append does not seem to work is because the value of the textarea is made up of the child node, but by treating it as multiple seperate nodes the screen won't update, according to my Firebug. Firebug will show me the updated child nodes, but NOT the text I typed manually into the textarea, whereas the screen shows me the manually typed text but not the new nodes.
根据我的 Firebug 的说法，append 似乎不起作用的原因是因为 textarea 的值由子节点组成，但是通过将其视为多个单独的节点，屏幕将不会更新。Firebug 会向我显示更新的子节点，而不是我手动输入到 textarea 的文本，而屏幕会向我显示手动输入的文本而不是新节点。
回答by Makko
You can reference by value of textarea.
您可以通过 textarea 的值进行引用。
$(document).ready(function () {
window.document.getElementById("ELEMENT_ID").value = "VALUE";
});
function GetValueAfterChange()
{
var data = document.getElementById("ELEMENT_ID").value;
}
works fine.
工作正常。
回答by Arthur Veselov
if(data.quote) $('textarea#message').val($('textarea#message').val()+data.message +' ').focus();
