如何使用jQuery清除文本区域

Question

如何使用jQuery清除文本区域

该问题已得到解答，但此处提供了完整的示例供以后参考。

您可以根据需要多次单击添加按钮和清除按钮，它将起作用。但是，一旦在文本框中键入内容，则清除和添加按钮将不起作用。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){

    $("#add").click(function(){

        $("#box").append("Test, ")
    });

    $("#clean").click(function(){
        $("#box").text("")
    });

});
</script>
</head>
<body>

<button id="add">ADD</button><br/>
<textarea rows="10" cols="50" id="box"></textarea><br/>
<button id="clean">Clear Box</button>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Dek*_*kel 5

在处理需要用户输入的元素时，应使用jQuery的val功能：

$(function() {
  $('#b1').click(function() {
      $("#textarea").val($("#textarea").val() + "This is a test");
  });
  $('#c1').click(function() {
    $("#textarea").val("")
  });
});

Run Code Online (Sandbox Code Playgroud)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea"></textarea><br />
<button id="b1">Append</button> <button id="c1">Clear</button>

Run Code Online (Sandbox Code Playgroud)

该append函数更改DOM，而这不是您要在此处执行的操作（这是破坏textarea元素默认行为的原因）。

归档时间：	9 年，6 月前
查看次数：	6779 次
最近记录：	9 年，6 月前