Show/Hide password

  Bài viết hay nhất1
how can i make a button to hide and show passwords
Show/Hide password 20171010
i wote that code but doesn't work
Code:
$(function(){
  $('input[name="password"]').replaceWith('<input type="password" name="password" size="25" maxlength="25" class="inputbox autowidth" /> <span style="font-family: FontAwesome;" id="shIcon"></span>');
  $('input[name="password"]').attr('id', 'password');
});


  var myInput = document.getElementById("password"),
      myBtn   = document.getElementById("shIcon");

   myBtn.onclick = function () {
        if (this.textContent === "" ) {
          myInput.setAttribute('type','text');
          this.textContent('')
          } else {
            myInput.setAttribute('type','password');
            this.textContent('');
            }
 };
  Bài viết hay nhất2
Code:
$(function() {
    $('input[name="password"]').replaceWith('<input type="password" name="password" size="25" maxlength="25" id="password" class="inputbox autowidth" /> <span class="fa fa-eye" id="shIcon"></span>');

    var myInput = document.getElementById("password"),
        myBtn = document.getElementById("shIcon");

    myBtn.onclick = function() {
        if(myInput.type === "password") {
            myInput.type = 'text';
            this.className = 'fa fa-eye-slash';
        } else {
            myInput.type = 'password';
            this.className = 'fa fa-eye';
        }
    };
});
  Bài viết hay nhất3
solved thank you @Zzbaivong

are there another ways to make this idea?
  Bài viết hay nhất4
Don't worry about it. That's a good solution.
  Bài viết hay nhất5
i think this is better  Show/Hide password 1f609
Code:
// Show/Hide password

$(function() {
 $('input[name="password').attr('id','password');
 $('<span class="show-pass" id="shIcon"></span>').insertAfter('input[name="password');
 $('head').append('<style rel="stylesheet" type="text/css">.hide-pass:after {content:"hide";}.show-pass:after {content: "show";}</style>
');
    

    var myInput = document.getElementById("password"),
        myBtn = document.getElementById("shIcon");

    myBtn.onclick = function() {
        if(myInput.type === "password") {
            myInput.type = 'text';
            this.className = 'hide-pass';
        } else {
            myInput.type = 'password';
            this.className = 'show-pass';
        }
    };
});
 
//by omarpop23
  Bài viết hay nhất6
More complex isn't synonymous with better.
  Bài viết hay nhất7
mmmmmm i am learning JS this days and this my first trick.
please can you write to me the perfect code for this trick and i will learn from you.

write the code by your way not my way.
i hope you can understand me because I'm very week in English
  Bài viết hay nhất8
You Don't Know JS!
  Bài viết hay nhất9
i know some of JS i'm still learning and i will need your help
  Bài viết hay nhất10

Zzbaivong wrote:You Don't Know JS!

omarpop23 wrote:i know some of JS i'm still learning and i will need your help
That's link to a book. Show/Hide password 1f605
  Bài viết hay nhất11
close this topic it solved
  Bài viết hay nhất12
my code is disable toolbar  Show/Hide password 1f625
  Bài viết hay nhất13

omarpop23 wrote:i think this is better  Show/Hide password 1f609
Code:
// Show/Hide password

$(function() {
 $('input[name="password').attr('id','password');
 $('<span class="show-pass" id="shIcon"></span>').insertAfter('input[name="password');
 $('head').append('<style rel="stylesheet" type="text/css">.hide-pass:after {content:"hide";}.show-pass:after {content: "show";}</style>
');
    

    var myInput = document.getElementById("password"),
        myBtn = document.getElementById("shIcon");

    myBtn.onclick = function() {
        if(myInput.type === "password") {
            myInput.type = 'text';
            this.className = 'hide-pass';
        } else {
            myInput.type = 'password';
            this.className = 'show-pass';
        }
    };
});
 
//by omarpop23

that code is disabling the toolbar what the problem
  Bài viết hay nhất14
You cannot reply to topics in this forum