为什么在 Jquery appendTo 中不能很好地在 Textarea 上运行？

Question

我想在 TextArea 中附加一些 html 代码（只是语法，如字符串）。我不知道原因，但我的代码不能正常工作，事实上，如果我运行代码并按下按钮，那么 html 代码将正确附加到 textarea 但如果我在 textarea 内写一些东西，然后我尝试单击或重新单击按钮以附加 html 代码没有任何反应！这是我的测试小提琴：
https://jsfiddle.net/jkLh0wat/1/
我也使用 Django，在我的情况下 textarea 是由 django 表单给出的（在表单中我使用 id “desc”到 textarea 字段）但我认为这不是 Django 问题，因为它是一个 html-jquery 问题...... .

这是代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-info btn-xs" id="link">link</button>
<textarea id="desc" style="width:350px;height:200px;border:1px solid"><b>hello</b></textarea>

<script>   
    $("#link").on('click', function() {
        $(document.createTextNode("<a href='link'>titolo-link</a>")).appendTo($("#desc"));
    })
</script>

Answer 1

问题是因为您的语法不正确。您无法可靠地将任何内容附加到textarea。相反，您需要使用val() 设置元素的value。通过将函数传递给 jQuery 的 val() 方法，可以达到与附加值相同的效果，如下所示：

$("#link").on('click', function() {
  $('#desc').val(function(i, v) {
    return v + '<a href="link">titolo-link</a>';
  });
});

#desc {
  width: 350px;
  height: 200px;
  border: 1px solid
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-info btn-xs" id="link">link</button>
<textarea id="desc"><b>hello</b></textarea>

另请注意，我删除了内联样式，因为它们不是好的做法。

我必须使用：onclick="insertAtCaret('desc', '<b>hi</b>')" 在这种情况下，一切正常，但是当我输入这样的“titolo-link”时，引号变成了错误！

在这种情况下，您可以使用/ 转义引号，但是最好使用不显眼的事件处理程序，就像我在上面所做的那样。试试这个：

$('#link').on('click', function() {
  insertAtCaret('desc', '<a href="link">titolo-link</a>');
});