Question

请参阅以下页面：

<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” “分别”将附加在 textarea text-box的文本末尾。

当我在页面加载后单击哈希标记时会发生这种情况。然而，当我然后开始手动编辑text-box中的文本，然后返回点击任何他们没有附加在Firefox上的主题标签。在Chrome上，最奇怪的事情正在发生 - 我手动输入的所有文本都会被新的主题标签取代并消失。

我可能在这里做了一些非常错误的事情，所以如果有人能在这里指出我的错误，以及如何解决这个问题，我将不胜感激。

感谢。

Answer 1

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/

Answer 2

使用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将向我显示更新的子节点，但不会显示我手动键入文本区域的文本，而屏幕显示手动键入的文本但不显示新节点。

Answer 3

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

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

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

工作正常。

Answer 4

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

jQuery .append（）在编辑文本后不附加到textarea

4 个答案: