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>
我期望的行为，我希望实现的是当我点击其中一个带有类hashtag的div时 ，他们的内容（分别为“#one”和“#two”）将附加在textarea文本的末尾text-box 。
当我在页面加载后单击哈希标记时，会发生这种情况。 然而，当我然后也开始手动编辑文本text-box的文本然后返回点击任何主题标签时，他们没有附加在Firefox上。 在Chrome上，最奇怪的事情正在发生 - 我手动输入的所有文本都被新的主题标签取代并消失。
我可能在这里做了一些非常错误的事情，所以如果有人能在这里指出我的错误，以及如何解决这个问题，我将不胜感激。
谢谢。
4 个解决方案
解决方案1
87 已采纳 2011-01-18 10:32:43
2件事。
首先， <textarea/>不是有效标记。 <textarea>代码都必须以充分完全关闭</textarea>结束标记。
其次， $(textarea).append(txt)不像你想象的那样工作。 加载页面时，textarea中的文本节点将设置该表单字段的值。 之后，可以断开文本节点和值。 当您在字段中键入时，值会更改，但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/
解决方案2
9 2011-01-18 10:30:45
使用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>
这有帮助吗？
添加的原因似乎不起作用是因为textarea的值由子节点组成，但是根据我的Firebug，通过将其视为多个单独的节点，屏幕将不会更新。 Firebug将向我显示更新的子节点，但不是我手动键入文本区域的文本，而屏幕显示手动键入的文本但不显示新节点。
解决方案3
3 2015-02-10 11:33:42
您可以通过textarea的值来引用。
$(document).ready(function () {
window.document.getElementById("ELEMENT_ID").value = "VALUE";
});
function GetValueAfterChange()
{
var data = document.getElementById("ELEMENT_ID").value;
}
工作良好。
解决方案4
0 2015-10-31 20:57:46
if(data.quote) $('textarea#message').val($('textarea#message').val()+data.message +' ').focus();
使用jQuery附加文本后，如何删除文本区域底部的空换行符？
[英]How can I remove the empty line break at the bottom of my textarea after appending text using jQuery?
jQuery：.append（）+用随机数替换文本 <textarea> ？
[英]jQuery: .append() + replace text with random number in <textarea>?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.