通过“显示/隐藏”按钮切换密码输入框type属性可实现明密文切换，需保持光标位置、焦点及可访问性，现代浏览器支持直接修改type，旧版ie需降级方案。

通过添加一个“显示/隐藏”按钮，配合修改密码输入框的 type 属性（在 text 和 password 之间切换），就能实现密码明文与密文的切换显示。关键在于控制输入框类型、保持光标位置、兼顾可访问性和用户体验。

基础实现：切换 input 的 type 属性

最直接的方式是监听按钮点击，动态修改 <input type="password"> 的 type 值：

• 点击“显示”时，设为 type="text"，密码以明文呈现；
• 点击“隐藏”时，设回 type="password"，恢复圆点遮盖。

注意：部分旧版 IE 不支持运行时修改 type，但现代浏览器（Chrome、Firefox、Edge、Safari）均无问题。若需兼容 IE，可用两个输入框（password + text）显隐切换，或用 CSS 遮罩模拟，但推荐优先支持现代标准。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

保持光标位置和输入焦点

切换类型时，浏览器默认会丢失焦点、重置光标到开头。优化体验需手动处理：

• 切换前记录当前光标位置（input.selectionStart / selectionEnd）；
• 切换后立即调用 input.focus()，再用 setSelectionRange() 恢复原位置；
• 确保按钮和输入框语义关联（如用 aria-controls），方便屏幕阅读器识别。

增强可用性与安全性提示

视觉反馈和轻量提醒能提升用户信任感：

• 按钮图标随状态变化（如 ?️ → ?️‍?️ 或 ? → ?），文字同步更新为“显示密码”/“隐藏密码”；
• 可添加短暂 tooltip 或 status text（如“当前为明文，注意周围环境”），不干扰操作；
• 无需后端参与：整个过程纯前端完成，密码始终未离开用户设备，不增加传输或存储风险。

完整示例代码（含焦点保持）

以下是一个简洁可靠的实现片段：

<input id="pwd" type="password" placeholder="请输入密码"><button id="toggle" aria-label="显示密码">?️</button>

<script>
const pwd = document.getElementById('pwd');
const toggle = document.getElementById('toggle');

toggle.addEventListener('click', () => {
  const isPassword = pwd.type === 'password';
  const start = pwd.selectionStart;
  const end = pwd.selectionEnd;

  pwd.type = isPassword ? 'text' : 'password';
  pwd.focus();
  pwd.setSelectionRange(start, end);

  toggle.setAttribute('aria-label', isPassword ? '隐藏密码' : '显示密码');
  toggle.textContent = isPassword ? '?️‍?️' : '?️';
});
</script>

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南