如何编写显示和隐藏密码输入字段的代码答案

【问题标题】：how to write a code of show and hide password input field如何编写显示和隐藏密码输入字段的代码
【发布时间】：2020-01-06 13:07:54
【问题描述】：

在这个问题中有这个问题的以下答案，但我给出了这个问题的最佳答案。

  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>

请分享我的答案

【问题讨论】：

您有什么问题吗？
还有一件事是在函数外声明变量，因为每次调用函数时js访问dom树，效率有点低

标签： javascript html passwords show-hide input-field

【解决方案1】：

这是一个更短的方法：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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");

  }
}

【讨论】：

【解决方案4】：

我在您的代码中没有发现任何错误或错误，您可以使用以下链接作为答案：https://www.w3schools.com/howto/howto_js_toggle_password.asp

【讨论】：

欢迎提供解决方案链接，但请确保您的答案在没有它的情况下有用：add context around the link 这样您的其他用户就会知道它是什么以及为什么会出现，然后引用最相关的您链接到的页面的一部分，以防目标页面不可用。 Answers that are little more than a link may be deleted.

【解决方案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";
      }
    }

【讨论】：