how to write a code of show and hide password input field

Question

In this question there are the following answers of this question but i give the best answer of this question.

  function myFunction() {
      var data = document.getElementById("myInput");
      if (data.type === "password") {
        data.type = "text";
      } else {
        data.type = "password";
      }
    }

<div class="form-group col-md-6">
<label class="control-label">Password</label>
<input type="Password" name="password password1" id="myInput" class="form-control eye" value="{{old('password')}}">
<i class="fa fa-eye" aria-hidden="true" onclick="myFunction()"> Show Hide</i>                                                             {!! $errors->first('password', '<p class="text-warning errorBag">:message</p>') !!}
</div>

Share my answer please

one more thing declare the variable outside the function because every time you call the function js access dom tree which makes it a bit inefficient — Bhavya Singh, Jan 06 '20 at 13:19

score 1 · Answer 1 · edited Jan 06 '20 at 13:18

1

Here is a shorter approach:

    var input = document.getElementById("myInput");
    function myFunction()
    { input.type = input.type === "password" ? "text" : "password" }

edited Jan 06 '20 at 13:18

Trevor Reid

3,310
4
27
46

answered Jan 06 '20 at 13:14

Bhavya Singh

311
2
14

score 0 · Answer 2 · answered Jan 06 '20 at 13:14

function myFunction() {
  var data = document.getElementById("myInput");
  var curType = data[0].getAttribute("type");
  if (curType === "password") {
    data.[0].setAttribute("type","text");

  } else {
    data.[0].setAttribute("type","password");

  }
}

score 0 · Answer 3 · answered Jan 06 '20 at 13:17

0

I am not finding any mistake or wrong in your code, You can use following link for your answer: https://www.w3schools.com/howto/howto_js_toggle_password.asp

answered Jan 06 '20 at 13:17

Sunny Rajdeep

151
1
3

A link to a solution is welcome, but please ensure your answer is useful without it: [add context around the link](//meta.stackexchange.com/a/8259) so your fellow users will have some idea what it is and why it’s there, then quote the most relevant part of the page you're linking to in case the target page is unavailable. [Answers that are little more than a link may be deleted.](//$SITEURL$/help/deleted-answers) – SecretAgentMan Jan 06 '20 at 18:01

score 0 · Answer 4 · answered Jan 06 '20 at 13:22

Try This:

<script type="text/javascript">  
            $(document).ready(function () {  
                $('#show_password').hover(function show() {  
                    //Change the attribute to text  
                    $('#txtPassword').attr('type', 'text');  
                    $('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');  
                },  
                function () {  
                    //Change the attribute back to password  
                    $('#txtPassword').attr('type', 'password');  
                    $('.icon').removeClass('fa fa-eye').addClass('fa fa-eye-slash');  
                });  
                //CheckBox Show Password  
                $('#ShowPassword').click(function () {  
                    $('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');  
                });  
            });  
        </script>

score 0 · Answer 5 · answered Jan 07 '20 at 00:57

you can try this

html code

<div class="form-group col-md-6">
<label class="control-label">Password</label>
<input type="Password" name="password password1" id="myInput" class="form-control eye" value="{{old('password')}}">
<button class="fa fa-eye" aria-hidden="true" onclick="myFunction()"> Show Hide</button>                                                     </div>

css code

 function myFunction() {
      var data = document.getElementById("myInput");
      if (data.type === "password") {
        data.type = "text";
      } else {
        data.type = "password";
      }
    }

how to write a code of show and hide password input field

5 Answers5