How to show and hide password when click on eye icon using jquery

show password eye icon html w3schools
show password eye icon jquery
show password eye icon bootstrap
toggle password visibility jquery
show password eye icon angular 7
show hide password codepen
show/hide password jquery codepen
material design show/hide password

I have requirement to show and hide user password when click on eye icon so I had written script for that,when I click on eye icon only class is changing but password is not visible and again click on slash-eye icon it should hidden both these method not working how to solve this issue?

<input type="password" name="player_password" id="pass_log_id" />

<span toggle="#password-field" class="fa fa-fw fa-eye field_icon toggle-password"></span>

<script>
$("body").on('click','.toggle-password',function(){
    $(this).toggleClass("fa-eye fa-eye-slash");

    var input = $("#pass_log_id").attr("type");

    if (input.attr("type") === "password") {
        input.attr("type", "text");
    } else {
        input.attr("type", "password");
    }
});
</script>

Your input is actually string. Check console, you should see that string does not have method attr() because you assign $().attr() to input

$("body").on('click', '.toggle-password', function() {
  $(this).toggleClass("fa-eye fa-eye-slash");
  var input = $("#pass_log_id");
  if (input.attr("type") === "password") {
    input.attr("type", "text");
  } else {
    input.attr("type", "password");
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span toggle="#password-field" class="fa fa-fw fa-eye field_icon toggle-password">Show/Hide</span>
<input type="password" id="pass_log_id"/>

How to show and hide password when click on eye icon using jquery, <span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password "></span>. 20. </div>. 21. </div>. 22. </form>. 23. </div>. 24. </div>. 25. </div>. $(document).on('click', '.toggle-password', function() { $(this).toggleClass("fa-eye fa-eye-slash"); var input = $("#pass_log_id"); input.attr('type') === 'password

You have to remove var .attr("type"); from your var input = $("#pass_log_id").attr("type");. You also can do it more elegant with ternary operator to toggle between type text and password:

$(document).on('click', '.toggle-password', function() {

    $(this).toggleClass("fa-eye fa-eye-slash");
    
    var input = $("#pass_log_id");
    input.attr('type') === 'password' ? input.attr('type','text') : input.attr('type','password')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
 
<body>
<input id="pass_log_id" type="password" name="pass" value="MySecretPass">
<span toggle="#password-field" class="fa fa-fw fa-eye field_icon toggle-password"></span>

</body>

Show/Hide password field, $(function(){ $('#eye'). click(function(){ if($(this). hasClass('fa-eye-slash')){ $(this). removeClass('fa-eye-slash'); $(this). addClass('fa-eye'); $('#password'). attr('type','text'); I have requirement to show and hide user password when click on eye icon so I had written script for that,when I click on eye icon only class is changing but password

<input type="checkbox" onclick="myFunction()">Show <input type="password" id="myInput" value="Password">


<script>
  function myFunction() {
    var x = document.getElementById("myInput");
    if (x.type === "password") {
      x.type = "text";
    } else {
      x.type = "password";
    }
  }
</script>

Toggle Visibility Password With Eye Icon jQuery, This tutorial shows you how to toggle the password visibility using the plain JavaScript. If the icon is clicked, toggle the type attribute of the password field between allows you to use the class fa-eye of the <i> element to show the eye icon. Inner toggle styled as icon; Password visible by default, toggle styled as text and shows on focus; Checkbox toggles password visibility. See also: jQuery Plugin For Previewing Password Field Values - Prevue; Simple jQuery Plugin To Show Hidden Password - preventPassTypo; jQuery Plugin For Windows 8 Password Reveal Feature - Sauron; Basic Usage: 1.

Please replace

var input = $("#pass_log_id").attr("type");

with

var input = $("#pass_log_id");

you need the element not the attribute,

How to Toggle Password Visibility Using Plain JavaScript, Click on button or icon to show hide enter password text in input box, just you need to add two call on login page and some jQuery and Css� Bootstrap show Password plugin give us to good layout and with we can also custom set class when password hide or show. We can also set toggle hide show password input field. In this full example i use bootstrap-show-password.js plugin for hide show password field. You can sole use this example simply by bellow small example.

Password Show Hide when click on eye icon on login page using , Toggle between password visibility with JavaScript. to toggle between password visibility --> <input type="checkbox" onclick="myFunction()">Show Password� Click on button or icon to show hide enter password text in input box, just you need to add two call on login page and some jQuery and CSS Other PlayList: There is a complete playlist of

How To Toggle Password Visibility, The HTML <input type="password”> element is a specific type of input an eye icon that you can click to show the password and click again to hide it. class “fa fa-eye” and id of “pass-status” which will create an eye icon using fontawesome HTML5 Forms � Form Widgets � PHP Form Handling � jQuery Form Handling� Basically, there are 3 password input fields with different password show methods. The first input has a checkbox, the second one has an eye icon, and the third one has a button for showing and hiding password characters. So, Today I am sharing JavaScript Show Hide Password Input With CSS.

HTML input type password field, How to start using jQuery? that allows your user to toggle password field text visibility on click. Inner toggle styled as icon; Password visible by default, toggle styled Simple jQuery Plugin To Show Hidden Password - preventPassTypo 12, * This toggle style shows a winking "eye-con" (nyuk, nyuk ). Icon Bar Menu Icon Accordion Tabs Vertical Tabs Tab Headers Toggle Like/Dislike Toggle Hide/Show Toggle Dark Mode Toggle Text Toggle Class ">Show Password.

Comments
  • Possible duplicate of stackoverflow.com/questions/45561636/jquery-show-hide-password
  • Possible duplicate of Jquery show/hide password
  • A working code example here codepen.io/Sohail05/pen/yOpeBm
  • @Manasi plz tell me what is wrong in my code
  • @MSp you are doing ** ".attr("type");" 2 times. ** 1) var input = $("#pass_log_id").attr("type"); and 2) if (input.attr("type") === "password")
  • While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value.
  • @adiga Thanks for your time