如何編寫顯示和隱藏密碼輸入字段的代碼

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>

請分享我的答案

Answer 1

這是一個較短的方法：

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

Answer 2

嘗試這個：

<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>  

Answer 3

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

  }
}

Answer 4

我沒有在您的代碼中發現任何錯誤或錯誤，您可以使用以下鏈接作為答案： https : //www.w3schools.com/howto/howto_js_toggle_password.asp

Answer 5

你可以試試這個

html代碼

<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代碼

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