我一直在从事一个项目,该项目需要我在表单密码字段上实现“显示/隐藏”按钮,该按钮在将密码显示为纯文本和将其隐藏在星号之间进行切换.

到目前为止,我想出了什么：

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()函数呢？

解决方法:

HTML：

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

使用Javascript：

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

请检查此工作示例.希望对您有帮助

https://jsfiddle.net/ra8ot13y/