Question

我有一个textarea，我应该清空所有数据，然后附加一个新数据。我试过这样的东西，但它总是以空数据结束。 textarea只是标准html输入：

<textarea name="mytextarea" id="mytextarea" rows="8" 
class="form-control" readonly="readonly">myOldData</textarea>

//This resulting in empty data
$('#mytextarea').val('');
$('#mytextarea').append("myData1");
$('#mytextarea').append("myData2");

但是如果：

//This resulting in just myData1
$('#mytextarea').val('');
$('#mytextarea').val("myData1");
$('#mytextarea').append("myData2");

案例3是，如果我不需要清空数据，只需追加即可正常工作：

//This resulting in just myData1myData2
$('#mytextarea').val("myData1");
$('#mytextarea').append("myData2");

这里发生了什么？如何先清空数据，然后添加一些新数据？

Answer 1

如何将数据附加到textarea？ Append方法应该与div，span，ul，ol等容器标签一起使用。使用.val（）在textarea中设置新数据。

如果你想附加一些内容而不是将它附加到你的#myData textarea的父级。它将满足您的目的。

Answer 2

如果您只是想设置值。我会构建你想要放在文本区域的字符串，然后立即设置它。

即

var newString = 'myData1';
newString += 'myData2';

$('#mytextarea').val(newString);

.append()用于将DOM元素附加到父DOM元素

Answer 3

我认为追加是错误的选择...设置你需要使用的输入元素的值.val（）。

所以我建议你创建一个连接字符串，然后将其设置为textarea的值。

另一种选择是创建一个像

这样的插件

＆＃13;

(function($) {
  $.fn.appendVal = function(value) {
    console.log(this, this.val)
    return this.val(function(i, val) {
      return val + value
    });
  }
})(jQuery);

jQuery(function($) {
  //This resulting in empty data
  $('#mytextarea').val('');
  $('#mytextarea').val("myData1");
  $('#mytextarea').val(function(i, val) {
    return val + "myData2"
  });
  $('#mytextarea').appendVal('myData3')
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea name="mytextarea" id="mytextarea" rows="8" class="form-control" readonly="readonly">myOldData</textarea>

＆＃13;

jQuery清空文本区域然后追加数据不起作用

3 个答案: