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');