使用文本框在TypeScript中展示数据

数据表示在软件开发中至关重要，随着对基于Web的应用需求的增加，以用户友好的方式呈现数据变得不可或缺。文本框是其中一种方式。文本框提供了一种以结构化和易于展示的方式向用户显示数据的简便方法。

本教程将提供一个全面的指南，介绍如何在TypeScript中使用文本框有效地展示数据。我们将涵盖文本框的概念，提供与文本框工作相关的语法和算法，并给出多个示例来说明如何使用文本框。

TypeScript中的文本框是什么？

文本框在Web开发中是一个常见且有用的输入元素。它们允许用户以结构化和用户友好的方式输入或查看数据。在TypeScript中，创建和使用文本框相对简单。本节将介绍TypeScript中文本框的基础知识，包括创建文本框、文本框属性、事件和验证。

为了在TypeScript中创建一个文本框，我们使用HTML输入元素，并将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中展示数据

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中展示数据

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中的文本框进行验证的示例−

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中展示数据

在TypeScript中使用文本框的示例

用于用户输入和数据收集的文本框

文本框可用于用户输入和数据收集。在TypeScript中，我们可以使用输入事件来检测用户在文本框中输入内容的时候。

let nameTextBox = document.getElementById("name") as HTMLInputElement;
nameTextBox.addEventListener("input", () => {
   console.log("User entered: " + nameTextBox.value);
});

输出

使用文本框在TypeScript中展示数据

在文本框中显示动态数据

文本框也可以用来显示从后端获取的动态数据或实时更新的数据。让我们考虑一个例子，我们想在文本框中显示当前时间。

在下面的代码中，我们使用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)