요약:
이제 그림과 같은 요구 사항이 있습니다. 사용자가 일반 텍스트 표시 확인란을 선택하면 사용자가 입력한 비밀번호가 일반 텍스트로 표시되어야 합니다. 확인란을 제거하면 다시 변경해야 합니다. 텍스트를 암호화하려면 먼저 입력 상자 유형을 수정하여 일반 텍스트 또는 암호화 텍스트를 표시할지 여부를 결정해야 합니다. 테스트 결과는 chrome, Firefox 및 ie9입니다. 모두 좋지만 ie8 아래에 오류가 보고됩니다. ie8에서는 입력 수정이 허용되지 않습니다. 마침내 다른 접근 방식을 사용하여 구현되었습니다.
일반 텍스트 표시를 선택한 경우 입력 상자를 type="text"로 바꿉니다. 선택하지 않은 경우 입력 상자를 type="password"로 바꿉니다.
<!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>요약:
이 글에는 기술적인 내용은 없지만, 이런 상호 작용이 여전히 존재합니다. 이 글은 주로 IE8 이하의 호환성 문제를 고려하여 작성되었습니다. 프로젝트에 이런 인터랙션이 있다면 참고하셔도 되고, 더 좋은 방법이 있으면 공유해 주시면 됩니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
