Question

我想在TextArea中添加一些html代码（只是语法，就像一个字符串）。我不知道原因，但我的代码不能正常工作，事实上如果我运行代码并按下按钮，而html代码将正确附加到textarea但是如果我在textarea中写一些东西并且在我尝试单击或重新单击按钮以附加html代码后，没有任何反应！在这里我的测试小提琴：
https://jsfiddle.net/jkLh0wat/1/
我也使用Django，在我的情况下textarea是由django形式给出的（在我使用id＆＃34; desc＆＃34;到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附加任何内容。相反，您需要使用value设置元素的val()。您可以通过将函数传递给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>');
});

为什么Jquery appendTo在Textarea上运作不好？

1 个答案: