如何为 Shiny 的 passwordInput 添加显示密码按钮？

2026-11-06数据阿明

可以在 passwordInput() 后添加一个按钮，再用 JavaScript 在 password 和 text 两种类型之间切换。下面的示例保留了 Shiny 原有的密码输入控件和登录按钮：

library(shiny)

ui <- fluidPage(
  passwordInput("password", "Password:"),
  actionButton("login", "Login"),
  tags$script(HTML("\
    (function () {
      const password = document.getElementById('password');
      if (!password) return;

      // 将输入框放进定位容器，便于把按钮放在输入框右侧。
      const box = document.createElement('div');
      box.style.position = 'relative';
      password.parentNode.insertBefore(box, password);
      box.appendChild(password);
      password.style.paddingRight = '2.8em';

      const toggle = document.createElement('button');
      toggle.type = 'button';
      toggle.textContent = '👁';
      toggle.setAttribute('aria-label', '显示密码');
      Object.assign(toggle.style, {
        position: 'absolute',
        right: '8px',
        top: '50%',
        transform: 'translateY(-50%)',
        border: '0',
        background: 'transparent',
        cursor: 'pointer'
      });
      box.appendChild(toggle);

      toggle.addEventListener('click', function () {
        const showing = password.type === 'text';
        password.type = showing ? 'password' : 'text';
        toggle.setAttribute('aria-label', showing ? '显示密码' : '隐藏密码');
      });
    })();
  "))
)

server <- function(input, output) {
}

shinyApp(ui, server)

点击眼睛按钮后，输入框会在密码和文本类型之间切换，密码值仍保留在原输入框中。示例用 👁 作为按钮图形，不同系统上的显示效果可能略有差异，也可以换成项目已有的图标。