Home > Article > Web Front-end > Solution to the error when modifying the type attribute of input under IE8_javascript skills

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

WBOYOriginal: 2016-05-16 16:36:201424browse

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>

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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Summary of cross-browser compatibility of css and javascript_javascript skillsNext article：Summary of cross-browser compatibility of css and javascript_javascript skills

See more

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

Related articles