此代码的作用是什么？

Question

我一直致力于一个项目，要求我在表单密码字段上实现一个显示/隐藏按钮，在显示密码为明文和将其隐藏在星号后面切换。

到目前为止我想出了什么：

＆＃13;

function pass(){ document.getElementById('password').type="password"; } 
function text(){ document.getElementById('password').type="text"; }

＆＃13;

<input type="password" id="password" />
<button class="ui-component__password-field__show-hide" type="button" onclick="text()">Show</button>

＆＃13;

切换到显示密码可以正常工作，但如何将按钮文本更改为＆＃34;隐藏＆＃34;一旦显示密码，并使其执行pass（）函数？

Answer 1

HTML：

<input type="password" id="password">
<button onclick="toggler(this)" type="button">Show</button>

使用Javascript：

function toggler(e) {
        if( e.innerHTML == 'Show' ) {
            e.innerHTML = 'Hide'
            document.getElementById('password').type="text";
        } else {
            e.innerHTML = 'Show'
            document.getElementById('password').type="password";
        }
}

请查看此工作示例。我希望这会对你有所帮助

https://jsfiddle.net/ra8ot13y/

Answer 2

我认为这就是你想要的。请看这个。

function toggle(button) {
    var password = document.getElementById("password");
    if (password.type == "password") {
        button.innerHTML = "Hide";
        password.type = "text";
    }
    else {
        button.innerHTML = "Show";
        password.type = "password";
    }
}

<input type="password" id="password" />
<button class="ui-component__password-field__show-hide" type="button" onclick="toggle(this);">Show</button>

此代码的作用是什么？

html代码创建输入以及在其中写入Show的按钮。单击该按钮时，将触发onclick属性，该属性又调用名为toggle的javascript函数。我在this内的属性值中添加了()，并在js部分内将其更改为button，这有助于我创建名为button的变量，其值为按钮。现在让我们回到javascript部分。当调用javascript中的函数时，它首先创建一个名为password的变量，其值为输入字段。然后，它会检查type的{{1}}是input field还是password如果发现其类型为text，则会更改按钮的值（写入其中的文本）隐藏并将输入字段的类型更改为文本。如果它找到任何其他类型的输入字符，即如果它发现字段的类型是文本，它会将按钮的值更改为显示，并将字段的类型更改为密码。

另外，请clicking here.

查看

Answer 3

  <button class="ui-component__password-field__show-hide" type="button" 
onclick="text(this)">Show</button>


   function text(item){ 
     if(item.innerText=='Show'){
      item.innerText='Hide';
      document.getElementById('password').type="password"; 
    }else{
     item.innerText='Show';
     document.getElementById('password').type="text"; 
    }


    }

Answer 4

在小型触摸屏设备上使用<button>切换<input>的类型会导致虚拟键盘关闭，因为<input>失去了焦点。您说的没什么可怕的，但是用户并不希望发生这种情况，并且（除非您的输入字段位于视口的上半部）打开的虚拟键盘会将输入字段向上推（因此它在视口中保持可见）。随后，关闭虚拟键盘将再次在某些设备/平台上重新放置虚拟键盘。对于用户而言，相当不愉快的是，对于客户端开发人员而言，还有很多事情要考虑。我的解决方案是使用<label>而不是<button>。这是我的作品：

function text(label){
  var input = document.getElementById(label.htmlFor);
    if(input.type === "password"){
      input.type = "text";
      label.innerHTML = "Hide";
    }else{
      input.type = "password";
      label.innerHTML = "Show";
    }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Show/Hide password</title>
  </head>
  <body>
    <input type="password" id="password"/>
		<label for="password" onclick="text(this)">Show</label>
  </body>
</html>

Answer 5

<!DOCTYPE html>
<html>
<div>
        <form>
            <label>Password:</label>
            <input type="password" name="password" id="pword">
            <br>
            <small id="hide">Show</small><input type="checkbox" name="checkbox" onclick="togglePassword()">
        </form>
    </div>
</html>

    <script type="text/javascript">
        
        function togglePassword(){
            x = document.getElementById("pword")
            y = document.getElementById("hide")
    
            if (x.type ==="password") {
                x.type = 'text';
                y.innerHTML = "Hide"
            } else{
                x.type="password";
                y.innerHTML = "Show"
            }
        }
    </script>

Answer 6

 Some script modified. Can you see also link
https://www.w3schools.com/howto/howto_js_toggle_password.asp

<input type="password" id="myInput" name="password" placeholder="Password"> 
 
 <i onclick="showPass()" id="adClass" class="fa fa-low-vision" aria-hidden="true"></i>


function showPass() {
        //alert(2);
      var x = document.getElementById("myInput");
      if (x.type === "password") {
          //font awesome eye close icon add it.
          $('#adClass').addClass('fa-eye');
          $('#adClass').removeClass('fa-low-vision');
        x.type = "text";
      } else {
        $('#adClass').addClass('fa-low-vision');
         $('#adClass').removeClass('fa-eye');
        x.type = "password";
      }
    }

Answer 7

使用JavaScript显示/隐藏密码字段的切换按钮的解决方案。

<!DOCTYPE html>
<html>
<head>
<title>Password-Show/Hide</title>
<script type="text/javascript">
//alert("hi");
function toggle(){
    alert("hello");
    var button = document.getElementById("show_hide").innerHTML;
    var pass = document.getElementById("password");
    if(button == "Show Password"){
        pass.setAttribute("type","text");
        document.getElementById("show_hide").innerHTML = 'Hide Password';
    }
    else{
        pass.setAttribute("type","password");
        document.getElementById("show_hide").innerHTML = "Show Password";
    }

}
window.addEventListener("load",function(){
    var sh = document.getElementById("show_hide");
    sh.addEventListener("click",toggle);
});
</script>
</head>
<body>
<input type="password" name="password" id="password" placeholder="Password" />
<button id="show_hide" >Show Password</button>
</body>
</html>

Answer 8

请进行一些更改。

＆＃13;

function text() {
var a=document.getElementById('password');
var b=document.getElementById('button');
if (a.type=="password"){
a.type = "text";
b.innerText = "Hide";
}
else {
a.type = "password";
b.innerText = "Show";
}
}

＆＃13;

<input type="password" id="password">
<button class="ui-component__password-field__show-hide" type="button" onclick="text()" id="button">Show</button>

＆＃13;

密码字段

8 个答案:

此代码的作用是什么？