迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

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

作者:迹忆客 最近更新:2024/03/20 浏览次数:

本教程文章将讨论 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 使用按钮清除文本区域

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

代码:

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

    </textarea>

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

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

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

运行此代码。

你可以使用 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 的按钮清除文本区域。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 JavaScript 中 use strict

发布时间:2024/03/20 浏览次数:56 分类:JavaScript

在本文中,学习 JavaScript 中的 use strict 特性。我们将通过不同的示例了解如何在 JavaScript 代码语句中创建和执行 use strict 关键字。

JavaScript 清除输入

发布时间:2024/03/20 浏览次数:125 分类:JavaScript

输入字段可以重置或与空值相关联。onfocus 属性可以触发一个函数,起到清除输入的作用。此外,使用 value 属性获取输入条目和清除输入的 reset 方法非常容易掌握。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便