jQuery .append() 在编辑文本后不附加到 textarea

IT技术 javascript jquery
2021-02-07 11:51:08

获取以下页面：

<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>

我期望的行为以及我想要实现的行为是，当我单击其中一个带有 class的div 时，hashtag它们的内容（分别为“#one”和“#two”）将附加到textarea 中文 本的末尾text-box。

当我在页面加载后单击哈希标签时会发生这种情况。但是，当我也开始text-box手动编辑文本然后返回单击任何主题标签时，它们不会附加到 Firefox 上。在 Chrome 上，最奇怪的事情正在发生——我手动输入的所有文本都被新的主题标签替换并消失了。


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

谢谢。

4个回答

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/

使用 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>

这有帮助吗？

根据我的 Firebug 的说法，append 似乎不起作用的原因是 textarea 的值由子节点组成，但是通过将其视为多个单独的节点，屏幕将不会更新。Firebug 会向我显示更新的子节点，而不是我手动输入到 textarea 的文本，而屏幕会向我显示手动输入的文本而不是新节点。

您可以通过 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();
其它你可能感兴趣的问题
上一篇错误：TypeError: $(...).dialog 不是函数 下一篇使用 THREE.LineBasicMaterial 的线条粗细