如何在点击时清空 textarea？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，清空文本区域是一项基本任务。通常情况下，我们可以通过添加一个“清空”按钮，然后使用 JavaScript 来实现该操作。但是如果您不想使用按钮来清空输入框，并且希望用户单击输入框时自动清空它，该怎么做呢？这篇文章将介绍如何使用最简单的方式实现此功能。

HTML

首先，我们需要在 HTML 中创建一个 textarea 元素。此元素应该包含一个 onclick 事件监听器，以便在单击文本区域时调用相应的 JavaScript 函数。另外，我们建议您给输入框添加一个占位符，以提示用户该输入框的作用。

<textarea id="myTextarea" onclick="clearTextArea()" placeholder="请输入文本"></textarea>

JavaScript

接下来，我们需要编写一个名为 clearTextArea() 的 JavaScript 函数，以便在单击 textarea 时清空文本区域。这个函数非常简单，只需找到 textarea 元素并将其值设置为空即可。

function clearTextArea() {
  var textArea = document.getElementById("myTextarea");
  textArea.value = "";
}

以上代码首先通过 document.getElementById() 方法获取了 textarea 元素，然后将其值设置为空。这就完成了清空文本域的过程。

完整代码演示

下面是完整的 HTML 和 JavaScript 代码示例，您可以将其复制到您的项目中进行测试。

-- -------------------- ---- -------
--------- -----
------
------
  --------------- -----------------
-------
------
  --------- --------------- ------------------------- -------------------------------

  ------- -----------------------
    -------- --------------- -
      --- -------- - --------------------------------------
      -------------- - ---
    -
  ---------
-------
-------

总结

通过这篇文章，您学习了如何使用最简单的方式在单击输入框时清空文本域。虽然这只是一个小技巧，但它可以提高用户体验，并且是很多前端应用程序必不可少的一部分。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/28897