Javascript 显示/隐藏密码字段的切换按钮

Question

我一直在从事一个项目，该项目要求我在表单密码字段上实现一个显示/隐藏按钮，该按钮可以在将密码显示为明文和将其隐藏在星号后面之间切换。

到目前为止我想出了什么:

function pass(){ document.getElementById('password').type="password"; } 
function text(){ document.getElementById('password').type="text"; }

<input type="password" id="password" />
<button class="ui-component__password-field__show-hide" type="button" onclick="text()">Show</button>

它可以很好地切换到显示密码，但是如何让它在显示密码后将按钮的文本更改为“隐藏”，并使其执行 pass() 函数？

Answer 1

function toggler(e) {
  if( e.innerHTML == 'Show' ) {
      e.innerHTML = 'Hide'
      document.getElementById('password').type="text";
  } else {
      e.innerHTML = 'Show'
      document.getElementById('password').type="password";
  }
}

<input type="password" id="password">
<button onclick="toggler(this)" type="button">Show</button>