jQuery implements the password display/hide switching function by changing the type attribute of the input

Generally when we log in and register, we will provide a requirement for users to choose whether to display the password they entered.

For this requirement, we will definitely think that it would be enough to dynamically change the type attribute of the input ( text display/password hidden):

So I used $(''#id).attr('type', 'password')This API, but the result was not what I thought. That way, something went wrong

HTML code

Uncaught Error: type property can't be changed

It probably means that this attribute cannot be modified.

So I googled First hand.

However, the result I got is like this

HTML code

<input id="showPwd" class="txt" type="text" value="密码" tabindex="2" /> 
<input id="pwd" class="txt" name="password" type="password" /> 
var showPwd = $("#showPwd"), pwd = $("#pwd"); 
showPwd.focus(function(){ 
  pwd.show().focus(); 
  showPwd.hide(); 
}); 
pwd.blur(function(){ 
  if(pwd.val()=="") { 
    showPwd.show(); 
    pwd.hide(); 
  } 
});

This is generally the method , to put it simply, it uses two inputs to switch the display back and forth, and get the characters input by each other!

I have tried this method and it can be implemented, and there is not a lot of code. But I always feel weird, should this need be realized like this? It's definitely impossible

Generally in this case, I will go and see if the big manufacturers do this, and some big manufacturers don't do this!

But my problem can’t be found on Google, so there should be no solution!

The above is the jQuery introduced by the editor to implement the password display and hide switching function by changing the type attribute of the input. I hope it will be helpful to you. If you have any questions, please leave me a message. The editor will reply to everyone in time. I would also like to thank you all for your support of the PHP Chinese website!

For more jQuery related articles to realize the password display and hide switching function by changing the type attribute of the input, please pay attention to the PHP Chinese website!