H5页面中密码框明文/密文切换需动态修改input的type属性为"text"或"password"，配合按钮图标（如?️/?）和aria-label提示，并直接赋值type而非setAttribute以确保兼容性。
在 H5 页面中，实现密码输入框的“明文/密文”动态切换，核心是控制 input 的 type 属性在 "password" 和 "text" 之间切换，并配合一个可视化的切换按钮（如眼睛图标）。
1. 基础 HTML 结构
需要一个 input 元素和一个触发切换的按钮（常用 i 或 button）：
<div class="password-field"> <input type="password" id="pwdInput" placeholder="请输入密码"> <button type="button" id="togglePwd">?️</button> </div>
2. 使用 JavaScript 动态切换 type
监听按钮点击，修改 input 的 type 属性，并同步更新按钮提示文案或图标状态：
Teleport tsh SSH (Identity-First SSH Access, no passwords/static keys)
下载
使用tbot机器ID身份文件配合tsh CLI，通过Teleport访问控制SSH登录托管主机或执行远程命令。
- 获取 input 元素和按钮元素
- 判断当前 type 是
"password"还是"text" - 切换 type，并更新按钮的 innerText / aria-label / class 等以反映当前状态
- 可选：聚焦到 input，提升操作连续性
const pwdInput = document.getElementById('pwdInput');
const toggleBtn = document.getElementById('togglePwd');
toggleBtn.addEventListener('click', () => {
const isPassword = pwdInput.type === 'password';
pwdInput.type = isPassword ? 'text' : 'password';
pwdInput.focus(); // 保持光标活跃
toggleBtn.textContent = isPassword ? '?' : '?️';
});
3. 注意兼容性与体验细节
虽然现代浏览器都支持运行时修改 input[type]，但仍需注意：
- 不要在 iOS Safari 中依赖
type="search"或其他非常规类型来回切换，仅限"password"↔"text" - 避免使用
input.setAttribute('type', ...)，应直接赋值input.type = ...，更可靠 - 建议添加
aria-label（如 “显示密码” / “隐藏密码”），提升无障碍访问体验 - 图标建议用 SVG 或字体图标替代 emoji，便于样式控制和适配暗色模式
4. 可选：封装为可复用函数
若页面有多个密码框，可封装通用逻辑：
function initPasswordToggle(inputId, btnId) {
const input = document.getElementById(inputId);
const btn = document.getElementById(btnId);
if (!input || !btn) return;
btn.addEventListener('click', () => {
const isPwd = input.type === 'password';
input.type = isPwd ? 'text' : 'password';
input.focus();
btn.setAttribute('aria-label', isPwd ? '隐藏密码' : '显示密码');
});
}
// 调用
initPasswordToggle('pwdInput', 'togglePwd');
