Javascript Show/Hide toggle button for password field

后端未结

关注

 6  1035

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

相关标签:

6条回答

北荒

2021-01-22 18:25
I think this is what you want. Please see this.
```
function toggle(button) {
    var password = document.getElementById("password");
    if (password.type == "password") {
        button.innerHTML = "Hide";
        password.type = "text";
    }
    else {
        button.innerHTML = "Show";
        password.type = "password";
    }
}
```
```
<input type="password" id="password" />
<button class="ui-component__password-field__show-hide" type="button" onclick="toggle(this);">Show</button>
```
What does this code does?

The html code creates the input as well as the button with Show written inside it. When the button is clicked, the onclick attribute is triggered which in turn calls a function of javascript named toggle. I had added this in the attribute's value inside () and had changed it to button inside the js part which helped me to create a variable named button whose value was the button. Now lets come back to the javascript part. When the function in javascript is called, it first creates a variable named password whose value is the input field. Then, it checks whether the type of the input field is password or text If it finds that its type is password, then it changes the button's value(text written inside it) to Hide and also changes the type of the input field to text. If it finds any other type of the input fiels i.e. if it finds that the type of the field is text, it changes the value of the button to Show and the field's type to password.

Also, check this out by clicking here.
0 讨论(0)
发布评论:

提交评论
- 加载中...

粉色の甜心

2021-01-22 18:29

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>

0 讨论(0)

说谎

2021-01-22 18:33

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


   function text(item){ 
     if(item.innerText=='Show'){
      item.innerText='Hide';
      document.getElementById('password').type="password"; 
    }else{
     item.innerText='Show';
     document.getElementById('password').type="text"; 
    }


    }

0 讨论(0)

挽巷

2021-01-22 18:35

Please make some changes.

function text() {
var a=document.getElementById('password');
var b=document.getElementById('button');
if (a.type=="password"){
a.type = "text";
b.innerText = "Hide";
}
else {
a.type = "password";
b.innerText = "Show";
}
}

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

0 讨论(0)

灰色年华

2021-01-22 18:39
Using <button> to toggle <input>'s type on small touchscreen devices causes closing the virtual keyboard because the <input> loses focus. Nothing horrible, you say, but the user does not expect it happen and also (unless your input field is positioned in the top half of the viewport) the open virtual keyboard pushes input field up (so it stays visible in the viewport). Subsequently, closing the virtual keyboard will reposition it again on some devices/platforms. Quite unpleasant to the user, quite a few more things to think of for the client-side developer. My solution is using <label> instead of <button>. Here is my piece:
```
function text(label){
  var input = document.getElementById(label.htmlFor);
    if(input.type === "password"){
      input.type = "text";
      label.innerHTML = "Hide";
    }else{
      input.type = "password";
      label.innerHTML = "Show";
    }
}
```
```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Show/Hide password</title>
  </head>
  <body>
    <input type="password" id="password"/>
		<label for="password" onclick="text(this)">Show</label>
  </body>
</html>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

余生分开走

2021-01-22 18:44

Solution to show/hide toggle button for password field using JavaScript.

<!DOCTYPE html>
<html>
<head>
<title>Password-Show/Hide</title>
<script type="text/javascript">
//alert("hi");
function toggle(){
    alert("hello");
    var button = document.getElementById("show_hide").innerHTML;
    var pass = document.getElementById("password");
    if(button == "Show Password"){
        pass.setAttribute("type","text");
        document.getElementById("show_hide").innerHTML = 'Hide Password';
    }
    else{
        pass.setAttribute("type","password");
        document.getElementById("show_hide").innerHTML = "Show Password";
    }

}
window.addEventListener("load",function(){
    var sh = document.getElementById("show_hide");
    sh.addEventListener("click",toggle);
});
</script>
</head>
<body>
<input type="password" name="password" id="password" placeholder="Password" />
<button id="show_hide" >Show Password</button>
</body>
</html>

0 讨论(0)

Javascript Show/Hide toggle button for password field

What does this code does?