使用 JavaScript 在 HTML 中使用按钮清除文本区域

Tahseen Tauseef 2023年1月30日 2022年5月1日
  1. JavaScript 中的事件监听器
  2. 在 JavaScript 中添加事件监听器
  3. 在 HTML 中使用 JavaScript 使用按钮清除文本区域
  4. 在 HTML 中添加 JavaScript 的外部文件
  5. 使用 JavaScript 的外部文件通过按钮清除文本区域
使用 JavaScript 在 HTML 中使用按钮清除文本区域

本教程文章将讨论 JavaScript 中的事件监听器,如何在 JavaScript 中创建事件监听器,以及如何使用 JavaScript 在 HTML 中通过按钮清除文本区域。它还将回答以下问题。

  1. 什么是 JavaScript 中的事件监听器。
  2. 如何在 JavaScript 中添加事件监听器。
  3. 如何在 HTML 代码中添加 .js 的外部文件。
  4. 如何使用 JavaScript 在 HTML 中通过按钮清除文本区域。

JavaScript 中的事件监听器

事件侦听器是一个等待某事发生的程序。例如,用户单击或移动鼠标、按下键盘上的键或磁盘 I/O 都是人类行为的示例。

同样,与网络相关的活动或内部定时器或中断都是事件的示例。侦听器设置为调用事件处理程序以响应输入或信号。

短语事件监听器在 Java 和 JavaScript 中经常使用。在其他语言中,事件处理程序是提供类似目的的过程。

在 JavaScript 中添加事件监听器

addEventListener() 是一个内置的 JavaScript 方法,它接受两个参数。第一个参数是要侦听的事件,一旦所述事件发生,第二个参数将被调用。

在不覆盖现有事件处理程序的情况下,单个元素可以拥有无​​限数量的事件处理程序。

代码:

<html>
<body>
    <button id="test">Click here</button>
    <h1 id="data"></h1>
    <script>
    document.getElementById("test").addEventListener("click", function(){
    document.getElementById("data").innerText = "Hello There!!!";
});
    </script>
</body>
</html>

下图向你展示了上面的代码是如何工作的。当你单击 click here 按钮时,它将为你提供 Hello there!!!的输出。

使用 HTML 在 JavaScript 中添加事件侦听器

运行此代码

在 HTML 中使用 JavaScript 使用按钮清除文本区域

有许多方法可以使用带有 JavaScript 的 HTML 中的按钮来清除文本区域。使用事件侦听器和事件处理程序。

代码:

<form name="form" method="post" target="_blank">
    <textarea  maxlength="150">

    </textarea>

    <input type="reset" value="Clear">
</form>

你将在文本框中键入一些文本以查看此代码的工作原理,如下面的屏幕截图所示。

使用 JavaScript 1 在 HTML 中使用按钮清除文本区域

然后单击 Clear 按钮。这将清除文本框中的所有文本,如下所示。

使用 JavaScript 2 在 HTML 中使用按钮清除文本区域

运行此代码

你可以使用 HTML 标记来清除表单中的文本区域。

在 HTML 中添加 JavaScript 的外部文件

src 属性可以使用脚本标签来导入外部 JavaScript 文件。src 属性也用于在 HTML 或 JavaScript 中添加图像。

JavaScript 文件的位置应该是 src 属性的值。

<script type="application/javascript" src="location/path_to_our_JavaScript_file.js"></script>

此脚本标签必须放在 HTML 内容中的 <head> 元素之间。

使用 JavaScript 的外部文件通过按钮清除文本区域

你还可以使用 HTML 中的外部 .js 文件添加函数和事件侦听器以使用按钮清除文本区域。

<input type="button" value="Clear" id="clear">
<textarea id='data' ></textarea>

它的外部 .js 文件将使用 src 命令在 HTML 文件头中的脚本函数中调用。

var input = document.querySelector('#clear');
var textarea = document.querySelector('#output');

input.addEventListener('click', function () {
    textarea.value = '';
}, false);

运行此代码

使用 JavaScript 删除 HTML 中的文本区域的另一种方法是通过将函数附加到单击按钮来更改 HTML。可以使用以下代码完成。

<input type="button" value="Clear" onclick="javascript:eraseText();">
    <textarea id='data'></textarea>

然后添加它的外部 .js 文件,该文件将提供函数 javascript:erasetext() 的详细信息。当用户选择一个元素并单击它时,会触发 onclick 事件。

function eraseText() {
    document.getElementById("data").value = "";
}

运行此代码

还有一种方法可以通过 onclick. 使用函数 clearContent()

function clearContent()
{
    document.getElementById("data").value='';
}

上面给出的是以下 html 代码的外部文件。

<input type="button" value="Clear" onclick="clearContent()">
<textarea id='data' ></textarea>

运行此代码

本文讨论了事件侦听器是事件处理程序的另一个名称。出于我们的目的,它们几乎可以互换,尽管严格来说它们确实是一起运行的。

侦听器是事件发生时执行的程序。处理程序只是响应发生的事件以及如何在 HTML 代码中添加外部 JavaScript 文件而执行的程序。

此外,你还发现了许多函数和事件侦听器,可用于通过使用 JavaScript 的按钮清除文本区域。

相关文章 - JavaScript Textbox