jQuery realizes the password display hidden switching function by changing the type attribute of input

1. When we log in and register, we will provide a requirement for users to choose whether the password they enter is displayed or not.

We certainly think of this requirement as long as we dynamically change the type attribute of input (text display/password hide):

So I used $(''#id).attr('type', 'password') This API, however, did not turn out to be what I thought, and went wrong

HTML code

Uncaught Error: type property can't be changed

It probably means that this attribute cannot be modified.

So I started with googl1.

However, the result I got is this

HTML code

<input id="showPwd" class="txt" type="text" value=" Password " 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(); 
  } 
}); 

Generally speaking, this is the way. Simply put, it is to use two input to switch back and forth and get each other's input characters!

I have tried this method, which can be realized, and the code is not much. But I always find it strange that this requirement should be realized in this way? It's definitely impossible

1 in this case, I will go to see if the big factory does this, and some big factories do not do this!

But Google can't find my problem, so there should be no solution!