資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用 TypeScript 在文字框中顯示資料
資料表示在軟體開發中至關重要，隨著對基於 Web 的應用程式需求的增加，以使用者友好的方式呈現資料也變得至關重要。文字框就是這樣一種方法。文字框提供了一種簡單的方法，可以以結構化和可呈現的方式向用戶顯示資料。
本教程將提供關於在 TypeScript 中使用文字框有效顯示資料的全面指南。我們將介紹文字框是什麼，提供用於處理文字框的語法和演算法，並提供多個示例來說明如何使用文字框。
TypeScript 中的文字框是什麼？
文字框是 Web 開發中一種常見且有用的輸入元素。它們允許使用者以結構化且使用者友好的方式輸入或檢視資料。在 TypeScript 中，建立和使用文字框相對簡單。本節將介紹 TypeScript 中文字框的基礎知識，包括建立文字框、文字框屬性、事件和驗證。
要在 TypeScript 中建立文字框，我們使用 HTML input 元素，並將 type 屬性設定為“text”。我們可以新增屬性來自定義文字框，例如佔位符、值和 ID。
以下是在 TypeScript 中建立文字框的示例：
const textBox = document.createElement("input");
textBox.type = "text";
textBox.placeholder = "Enter your name";
textBox.value = "John Doe";
textBox.id = "nameInput";
document.getElementsByTagName('body')[0].appendChild(textBox);
輸出
TypeScript 中文字框的屬性
文字框具有多個屬性，我們可以使用這些屬性來自定義其外觀和行為。文字框的一些常用屬性包括：
value - 在文字框中顯示的文字
placeholder：文字框為空時顯示的提示或示例文字
readOnly - 布林值，確定文字框是否可編輯
disabled - 布林值，確定文字框是否啟用
maxLength - 文字框中允許的最大字元數
以下是在 TypeScript 中設定文字框的一些屬性的示例：
const textBox = document.createElement("input");
textBox.type = "text";
textBox.placeholder = "Enter your email";
textBox.readOnly = true;
textBox.disabled = true;
textBox.maxLength = 50;
document.getElementsByTagName('body')[0].appendChild(textBox);
輸出
TypeScript 中文字框中的事件
文字框還有一些事件，我們可以使用這些事件來檢測使用者操作並做出相應響應。文字框的一些常用事件包括：
focus - 當文字框獲得焦點時觸發
blur - 當文字框失去焦點時觸發
input - 當文字框的值更改時觸發
change - 當文字框的值更改並失去焦點時觸發
以下是在 TypeScript 中向文字框新增事件偵聽器的示例：
const textBox = document.createElement("input");
textBox.type = "text";
textBox.placeholder = "Enter your age";
textBox.addEventListener("input", (event) => {
console.log(`Value changed to ${event.target.value}`);
});
輸出
TypeScript 中文字框中的驗證
驗證是使用文字框的關鍵方面。在處理使用者輸入之前，我們必須確保使用者輸入滿足某些條件。在 TypeScript 中，我們可以使用多種方法來驗證文字框，例如正則表示式、自定義函式和內建驗證屬性。
以下是如何在 TypeScript 中使用正則表示式驗證文字框的示例：
TypeScript 程式碼
const input = document.getElementById('email') as HTMLInputElement | null;
const emailError = document.getElementById('email-error');
input?.addEventListener('input', function (event) {
const target = event.target as HTMLInputElement;
const value = target.value;
const regex = /^\S+@\S+\.\S+$/;
if (!regex.test(value)) {
input.setCustomValidity("Please enter a valid email address.");
emailError.style.color = "red"
} else {
input.setCustomValidity("Perfectly Valid Email");
emailError.style.color = "green"
}
const validationMessage = input.validationMessage;
emailError.textContent = validationMessage;
});
HTML 程式碼
<!DOCTYPE html> <html> <head> <title>Document</title> <script defer src="./index.js"></script> </head> <body> <input type="text" id="email" placeholder="Enter your email"> <div id="email-error"></div> </body> </html>
輸出
在 TypeScript 中使用文字框的示例
使用文字框進行使用者輸入和資料收集
文字框可用於使用者輸入和資料收集。在 TypeScript 中，我們可以使用 input 事件來檢測使用者何時在文字框中鍵入內容。
let nameTextBox = document.getElementById("name") as HTMLInputElement;
nameTextBox.addEventListener("input", () => {
console.log("User entered: " + nameTextBox.value);
});
輸出
在文字框中顯示動態資料
文字框也可用於顯示從後端獲取或即時更新的動態資料。讓我們考慮一個示例，我們希望在文字框中顯示當前時間。
在下面的程式碼中，我們使用 document.createElement 方法建立一個文字框，並使用 type 屬性將其型別設定為“text”。然後，我們定義一個名為 updateTextBox 的函式，該函式使用 toLocaleTimeString 方法獲取當前時間，並將文字框的值設定為當前時間。我們使用 setInterval 方法每秒更新一次文字框。
let dynamicTextBox = document.createElement("input");
dynamicTextBox.type = "text";
function updateTextBox() {
let currentTime = new Date().toLocaleTimeString();
dynamicTextBox.value = currentTime;
}
// Update the text box every second
setInterval(updateTextBox, 1000);
document.getElementsByTagName('body')[0].appendChild(dynamicTextBox)
輸出
結論
總之，文字框是用於在 TypeScript 中顯示和收集資料的強大工具。在本教程中，我們介紹了 TypeScript 和文字框的基礎知識，提供了用於處理文字框的語法和演算法，並提供了多個示例來說明如何有效地使用文字框。我們看到了文字框如何用於顯示靜態和動態資料。
2000+ 次瀏覽
