密码字段的Javascript显示/隐藏切换按钮 [英] Javascript Show/Hide toggle button for password field

问题描述

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

I have been working on a project that requires me to implement a Show/Hide button on a form password field, that toggles between showing the password as plaintext, and hiding it behind asterisks.

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

What I came up with so far:

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

It works fine for switching to showing the password, but how do I make it change the text of the button to "Hide" once the password is shown, and make it execute the pass() function?

推荐答案

HTML:

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

JavaScript:

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";
        }
}

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

please check this working example. i hope it will help you

https://jsfiddle.net/ra8ot13y/

这篇关于密码字段的Javascript显示/隐藏切换按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！