edittext密码可见如何实现

EditText

小樊

2024-07-02 14:34:37

栏目: 编程语言

要实现密码可见的功能，可以在输入密码的地方添加一个按钮，用户点击按钮时可以切换密码的可见状态。当按钮处于可见状态时，用户输入的密码会显示为明文；当按钮处于隐藏状态时，用户输入的密码会显示为密文。

以下是一个简单的示例代码，演示如何实现密码可见的功能：

HTML部分：

<input type="password" id="passwordInput" />
<button id="showPasswordBtn">显示密码</button>

JavaScript部分：

const passwordInput = document.getElementById('passwordInput');
const showPasswordBtn = document.getElementById('showPasswordBtn');

showPasswordBtn.addEventListener('click', function() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    showPasswordBtn.textContent = '隐藏密码';
  } else {
    passwordInput.type = 'password';
    showPasswordBtn.textContent = '显示密码';
  }
});

以上代码中，当用户点击“显示密码”按钮时，会切换密码输入框的类型（从password到text或从text到password），并更新按钮的文本内容（显示密码/隐藏密码）来提示用户当前密码的可见状态。

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

edittext密码可见如何实现

最新问答

相关标签