使用 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