Solution to the error when modifying the type attribute of input under IE8

Solution to the error when modifying the type attribute of input under IE8_javascript skills

WBOY

Release： 2016-05-16 16:36:20

Original

1455 people have browsed it

Summary:

Now there is a requirement as shown in the picture. When the user checks the Show clear text check box, the password entered by the user must be displayed in clear text. When the check box is removed, it must be changed back to cipher text. The first thing that comes to mind is to modify the input box. type to decide whether to display plain text or cipher text. Use jQuery's attr to do the test. The test results are that chrome, Firefox, and ie9 are all good, but an error will be reported below ie8. I found the reason. Modifying the input is not allowed in ie8. The type attribute was finally implemented using a different approach.

When Show Plain Text is checked, replace the input box with type="text". When it is not checked, replace the input box with type="password". The code is as follows:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script src="jquery.min.js"></script>
</head>
<body>
<span id="pass"><input name="password" type="password"></span><label><input type="checkbox" id="show-password">显示明文</label>
<script>
$('#show-password').click(function() {
var inp,cname,val;
if(this.checked) {
inp = $('#pass').children('input');
cname = inp.attr('name');
val = inp.val();
$('#pass').html('<input name="'+cname+'" value="'+val+'" type="text">');
} else {
inp = $('#pass').children('input');
cname = inp.attr('name');
val = inp.val();
$('#pass').html('<input name="'+cname+'" value="'+val+'" type="password">');
}
});
</script>
</body>
</html>

Copy after login

Summary:

This article does not have any technical content, but this kind of interaction still exists. This article is mainly written to consider the compatibility issues below IE8. If you have this kind of interaction in your project, you can refer to it, or if you have a better method, you can share it with me.