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

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

article 2025/6/7 11:56:22

在现代 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>

🏁 总结

通过本教程，你已经学会了如何使用 TypeScript 和 HTML/CSS 构建一个简洁的密码可见性切换功能，适用于任何需要用户登录、注册或修改密码的表单页面。你也可以进一步扩展功能，比如：

添加密码强度检测；
集成密码生成器；
在移动端做响应式优化。

——未完待续——

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

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

编程日记 2025/5/31 12:18:08

Django压缩包形式下载文件

通过web将minio上的文件以压缩包-文件夹-文件的形式下载到本地 import os from bx_mes import settings from io import BytesIO import zipfile from django.http import StreamingHttpResponse class FileRemote(GenericAPIView):def post(self,request):# 压缩包名folder_n…...

编程日记 2025/6/2 6:52:37

晚期NSCLC临床试验终点与分析策略

1. 案例背景 1.1 研究设计 1.1.1 适应症与分组晚期非小细胞肺癌一线治疗，干预组为新型免疫检查点抑制剂联合化疗，对照组为化疗单药，随机双盲安慰剂对照III期试验。 1.1.2 目标框架基于FDA或ICH指南，终点定义和分析策略影响试验科学性及监管审评。 2. 终点定义 2.1 主要…...

编程日记 2025/5/31 2:17:00

从比分滚动到数据革命：体育数据如何重构我们的观赛体验？

当凌晨三点的欧冠决赛与闹钟冲突时，当世界杯小组赛因时差难以全程跟进时，当代体育迷早已不再依赖电视直播 —— 打开手机里的比分网，实时跳动的体育大数据正构建着全新的观赛宇宙。这些曾经被视为 "辅助工具" 的平台，如…...

编程日记 2025/6/2 7:50:13

华为网路设备学习-23（路由器OSPF-LSA及特殊详解二）

OSPF动态路由协议要求： 1.必须有一个骨干区域（Area 0）。有且仅有一个，而且连续不可分割。 2.所有非骨干区域（Area 1-n）必须和骨干区域（Area 0）直接相连，且所有区域之间…...

编程日记 2025/6/4 19:03:32

VPet虚拟桌宠，一款桌宠软件,支持各种互动投喂等. 开源免费并且支持创意工坊

📌 大家好，我是智界工具库，每天分享好用实用且智能的开源项目，以及在JAVA语言开发中遇到的问题，如果本篇文章对您有所帮助，请帮我点个小赞小收藏小关注吧，谢谢喲！😘 工具…...

编程日记 2025/6/2 7:42:29

新书速览|ASP.NET MVC高效构建Web应用

《ASP.NET MVC高效构建Web应用》本书内容《ASP.NET MVC高效构建Web应用》以目前流行的ASP.NET MVC 5、HTML和Razor为主线，全面系统地介绍ASP.NET MVC Web应用开发的方法，配套提供实例源码、PPT课件与作者一对一QQ答疑服务。《ASP.NET MVC高效构建Web…...

编程日记 2025/6/4 15:51:34

MySQL 9.3 超详细下载安装教程（Windows版）附图文说明

MySQL 9.3 超详细下载安装教程（Windows版）附图文说明 💡 本文适用于Windows 10/11系统，包含完整的安装流程、环境配置和疑难解答。建议收藏备用！ 一、下载MySQL 1. 访问官网进入MySQL官方下载页面：http…...

编程日记 2025/6/4 21:33:51

Linux之软件包管理器（CentOS系统） —— yum

目录一、软件包管理器 1-1什么是软件包 1-2 Linux软件生态 Linux下载软件的过程(Ubuntu、Centos、other) 操作系统的好坏评估---生态问题 1. 应用软件生态 2. 硬件兼容性 3. 开发者社区与开源生态 4. 商业合作与盈利模式 5. 用户粘性与使用习惯 6. 安全与合规生态 …...

编程日记 2025/6/2 7:32:38

webpack吐环境分析

需要解决的问题扣取下来的webpack文件过大解决思路用ast将需要的代码扣下来结果展示实现步骤第一步：我们得知道需要哪些模块在入口处，增加模块记录第二步，分析ast代码通过分析发现,key 有三种值分别为NumbericLiteral、StringLi…...

编程日记 2025/6/4 12:12:33

Unity InputField 滑动滚轮实现对文本的滚动

一。效果演示： 二。实现原理： 创建一个脚本KeInputScroll.cs 继承InputField类和IScrollHandler接口。如下面代码所示： using UnityEngine; using UnityEngine.EventSystems; using UnityEngine.UI;public class KeInputScroll : InputFiel…...

编程日记 2025/6/2 8:14:17

机械设计插件

在进行机械设计的时候，很多厂家对我们开放了外购件的模型，方便我们进行设计选购，但是尽管如此，我们在使用的时候还是很麻烦，我目前使用的是Part data manager来管理这些厂家的模型，使用方法非常简单。首先…...

编程日记 2025/6/2 7:40:21

Monorepo 管理

以下是设计可扩展的前端架构（Monorepo 管理）的核心知识点总结：一、Monorepo 的核心概念与优势 1. 什么是 Monorepo？定义：将多个相关项目（包、应用、库）存储在一个代码仓库中的代码管理模式。对比 Multirepo：传统每个项目独立仓库，Monorepo 统一管理依赖、配置和工具…...

编程日记 2025/6/4 12:02:08

RabbitMQ核心机制——延迟队列

一、什么是延迟队列？ 消息发送之后，不想让消费者马上收到消息，而是等待特定时间后消费者才能拿到这条消息进行消费。二、如何实现延迟队列 RabbitMQ并没有直接支持延迟队列这一功能，如果需要实现延迟队列，有两种方法…...

编程日记 2025/6/5 2:55:33

华为云Flexus+DeepSeek征文｜Flexus云服务器Dify-LLM资源部署极致体验Agent

前引：重磅来袭！本次以DeepSeek-V3/R1商用大模型和Dify-LLM应用平台一键部署为核心，专为新手打造“开箱即用”的AI开发体验。无论你是想快速搭建企业级AI应用，还是探索大模型落地的无限可能，只需跟随小编实现三步走&…...

编程日记 2025/6/2 9:20:42

IP 网段

以下是关于 IP 网段的详细解析，涵盖基本概念、表示方法、划分规则及实际应用场景： 一、网段核心概念 1. 什么是网段？ 网段指一个逻辑划分的 IP 地址范围，属于同一子网的设备可以直接通信（无需经过路由器&#xff09…...

编程日记 2025/6/1 0:08:27

芋道框架 - 接口设置匿名访问

芋道框架 - 接口设置匿名访问在芋道（yudao）框架中，有些接口需要开放给外部访问，例如文件上传、验证码获取等。要实现接口的匿名访问，主要有两个步骤： 1. 在接口上添加 PermitAll 在需要匿名访问的接口方…...

编程日记 2025/5/30 18:55:41

熔盐核裂变反应堆：第四代核能技术的重要突破

在核能技术的演进历程中，第四代核能系统被寄予厚望，代表着更高的效率、更强的安全性和更广泛的资源适应能力。近年来，熔盐反应堆技术作为其中最具挑战性和变革性的方案之一，逐步走向工程化与实用化阶段。其中，液态燃料…...

编程日记 2025/5/29 15:07:38

鸿蒙OSUniApp 实现的日期选择器与时间选择器组件#三方框架 #Uniapp

UniApp 实现的日期选择器与时间选择器组件在移动应用开发中，日期选择器和时间选择器是表单、预约、日程、打卡等场景中不可或缺的基础组件。一个好用的日期/时间选择器不仅能提升用户体验，还能有效减少输入错误。随着 HarmonyOS（鸿蒙&#…...

编程日记 2025/6/1 17:04:20

Linux云计算训练营笔记day16（Linux周期性计划任务、Python）

Linux云计算训练营笔记day16（Linux周期性计划任务、Python） 目录 Linux云计算训练营笔记day16（Linux周期性计划任务、Python）1.Linux 周期性计划任务2.Python 1.Linux 周期性计划任务周期性计划任务用途: 按照设置的时间间隔,为…...

编程日记 2025/5/30 16:50:17

对比Redis与向量数据库（如Milvus）在AI中的应用

对比Redis与向量数据库（如Milvus）在AI中的应用在AI架构中，缓存系统的设计直接影响响应速度、资源成本以及推理路径是否高效。而面对不同的AI业务诉求，选用什么类型的缓存系统、如何搭配，往往是系统架构设计中必须深入…...

编程日记 2025/5/29 15:08:25

【Elasticsearch入门到落地】13、DSL查询详解：分类、语法与实战场景

接上篇《12、索引库删除判断以及文档增删改查》上一篇我们讲解了如何判断索引库是否存在并删除它，以及如何对索引库中的文档进行增删改查操作。本篇我们进入ElasticSearch的DSL语法的详解。 Elasticsearch（ES）作为强大的分布式搜索引擎&…...

编程日记 2025/6/4 17:33:08

[欠拟合过拟合]机器学习-part10

7.欠拟合过拟合 7.1欠拟合欠拟合是指模型在训练数据上表现不佳，同时在新的未见过的数据上也表现不佳。这通常发生在模型过于简单，或者是训练的次数不够，无法捕捉数据中的复杂模式时。欠拟合模型的表现特征如下： 训练误差较高。 …...

编程日记 2025/6/2 20:01:11

【windwos】文本编辑器Notepad++ 替代品Notepad--

一、N和N--对比介绍曾经备受推崇的「Notepad」曾是Windows上的经典代码编辑器。然而，作者的一些政治言论已经让它被广大中国用户抛弃。一个名为「Notepad--」的新编辑器，也是开源免费，功能和实用性也在尽可能接近。与此同时，「N…...

编程日记 2025/6/3 0:43:05

Linux基本指令篇 —— clear指令

clear 是 Linux 和 Unix 系统中用于清空终端屏幕的常用命令。它的作用是移除当前终端窗口中的所有可见内容，提供一个干净的界面，类似于“刷新”终端。以下是关于 clear 的详细解析： 目录 1. 基本用法 2. 实现原理 3. 常见场景场景 1&…...

编程日记 2025/6/6 16:24:34

Anaconda 的基础教程，从入门到精通

以下是Anaconda的基础教程，从入门到精通：一、Anaconda简介 Anaconda是一个用于科学计算的Python/R发行版，集成了1000+常用数据科学包，提供环境管理功能，解决包依赖冲突问题。适合数据科学、机器学习、深度学习等领域。二、安装与配置 1. 下载与安装官网下载：Anaco…...

编程日记 2025/6/5 5:10:34