当前位置：首页 > article >正文

15.2【基础项目】使用 TypeScript 实现密码显示与隐藏功能

article 2025/8/21 18:51:34

在现代 Web 应用中，允许用户切换密码的可见性不仅提升了用户体验，也让表单填写更便捷。使用 TypeScript 来实现这个功能，不仅具备强类型检查优势，还能提升代码的可维护性。

✨ 我们要实现的功能

在这篇文章中，我们将使用 TypeScript 构建一个简单的密码输入组件，具备以下特性：

用户可以在输入框中输入密码；
通过按钮切换密码显示或隐藏；
按钮图标会根据状态更新；
在隐藏状态下密码仍保持安全。

🔧 HTML + CSS 页面结构与样式

以下是页面的 HTML 与 CSS 代码，包含密码输入框与切换按钮的基本布局和样式：

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>显示与隐藏密码</title><style>body {font-family: Arial, sans-serif;background-color: #f9f9f9;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.container {background: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);width: 300px;text-align: center;}h1 {font-size: 24px;color: #333;}.input-group {display: flex;flex-direction: column;align-items: center;width: 100%;}.input-container {position: relative;width: 100%;}input {width: 80%;padding: 10px;font-size: 16px;border: 1px solid #ccc;border-radius: 4px;padding-right: 40px;}button {background: transparent;border: none;cursor: pointer;position: absolute;right: 35px;top: 50%;transform: translateY(-50%);font-size: 18px;}button:focus {outline: none;}</style></head><body><div class="container"><h1>请输入密码</h1><form id="passwordForm"><div class="input-group"><div class="input-container"><input type="password" id="password" placeholder="请输入您的密码" /><button type="button" id="toggleVisibility" aria-label="显示密码">👁️</button></div></div></form></div></body>
</html>

📌 说明：

输入框 input[type="password"] 用于接收用户密码；
按钮位置使用 position: absolute 放在输入框右侧；
默认使用图标 👁️ 表示“显示密码”，点击后变为 🙈 表示“隐藏密码”。

🧠 TypeScript 实现逻辑

以下是核心的 TypeScript 代码，用于实现点击按钮时切换密码可见性：

const inp = document.getElementById('password') as HTMLInputElement | null;
const btn = document.getElementById('toggleVisibility') as HTMLButtonElement | null;if (inp && btn) {btn.addEventListener('click', () => {if (inp.type === 'password') {inp.type = 'text';btn.textContent = '🙈'; // 显示密码} else {inp.type = 'password';btn.textContent = '👁️'; // 隐藏密码}});
}

📝 核心逻辑解释：

使用 getElementById 获取密码输入框和按钮元素；
监听按钮点击事件；
根据当前输入框的 type 类型切换为 "text" 或 "password"；
同时切换按钮的图标。

🔄 编译 TypeScript 为 JavaScript

浏览器无法直接运行 TypeScript，需要将 .ts 文件编译为 .js 文件，使用以下命令：

tsc task.ts
# 或者使用 npx
npx tsc task.ts

编译后将生成 task.js 文件，可通过 <script src="task.js"></script> 引入页面中。

✅ 最终完整代码（使用 JavaScript）

以下是最终的 HTML 文件，已内嵌 JavaScript 实现密码显示/隐藏功能：

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>显示与隐藏密码</title><style>body {font-family: Arial, sans-serif;background-color: #f9f9f9;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.container {background: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);width: 300px;text-align: center;}h1 {font-size: 24px;color: #333;}.input-group {display: flex;flex-direction: column;align-items: center;width: 100%;}.input-container {position: relative;width: 100%;}input {width: 80%;padding: 10px;font-size: 16px;border: 1px solid #ccc;border-radius: 4px;padding-right: 40px;}button {background: transparent;border: none;cursor: pointer;position: absolute;right: 35px;top: 50%;transform: translateY(-50%);font-size: 18px;}button:focus {outline: none;}</style></head><body><div class="container"><h1>请输入密码</h1><form id="passwordForm"><div class="input-group"><div class="input-container"><input type="password" id="password" placeholder="请输入您的密码" /><button type="button" id="toggleVisibility" aria-label="显示密码">👁️</button></div></div></form></div><script>var inp = document.getElementById('password');var btn = document.getElementById('toggleVisibility');if (inp && btn) {btn.addEventListener('click', function () {if (inp.type === 'password') {inp.type = 'text';btn.textContent = '🙈';} else {inp.type = 'password';btn.textContent = '👁️';}});}</script></body>
</html>