JavaScript_javascript 기술을 기반으로 양식 비밀번호 숨기기 및 표시

사이트의 보안을 위해 비밀번호를 더 복잡하게 설정하는 친구들이 많은데, 비밀번호가 명확하게 표시되지 않고, 입력이 맞는지 틀리는지 알 수 없습니다. 표시할 수 있는데, js 코드를 기반으로 구현하는 방법은 어떤가요? 사용자가 입력하면 비밀번호가 점이나 별표로 표시됩니다. 사용자는 버튼을 클릭하여 비밀번호를 표시할 수 있습니다.

인터페이스 구조, 외부 패스박스, 내부 레이어에 입력 및 i 태그를 추가하고 해당 클래스 이름을 추가합니다.

<div class="pass-box">
<input type="password" name="pass" />
<i state="off"></i>
</div>

이제 해당 속성 값을 해당 클래스에 추가합니다. 이 상자에서 i는 입력 위에 있어야 하므로 i에 위치 속성을 부여한 다음 상단과 오른쪽을 조정해야 합니다. 높이와 배경 이미지를 설정합니다.

.pass-box {
width: 300px;
margin: 30px auto;
position: relative;
}
.pass-box input {
border: #cccccc 1px solid;
background-color: #fff;
color: #666;
padding: 10px;
width: 100%;
box-sizing: border-box;
}
.pass-box i{
display: inline-block;
width: 30px;
height: 30px;
position: absolute;
right: 5px;
top:5px;
background-image: none;
background-size: 200% 200%;
background-position: center;
}

이렇게 하면 i에 클릭 이벤트가 추가됩니다. HTML 구조에서 이 함수는 주로 사용자의 두 번의 클릭에 대한 효과를 판단하는 데 사용됩니다. , 비밀번호가 표시됩니다. 두 번째로 비밀번호가 숨겨집니다. 따라서 이 상태를 사용하여 상태를 확인하세요.

입력의 유형 속성을 수정하는 것이 핵심입니다. 표시할 때는 유형이 텍스트이고, 숨길 때는 비밀번호이므로 JS의 논리 처리가 비교적 명확합니다.

var ele_pass_box = document.getElementsByTagName("div")[0];
var ele_pass = ele_pass_box.getElementsByTagName("input")[0];
var ele_eye = ele_pass_box.getElementsByTagName("i")[0];
ele_eye.onclick = function () {
var state = this.getAttribute("state");
if(state === "off") {
ele_pass.setAttribute("type", "text");
ele_eye.setAttribute("state", "on");
ele_eye.style.opacity = 0.2;
} else {
ele_pass.setAttribute("type", "password");
ele_eye.setAttribute("state", "off");
ele_eye.style.opacity = 1;
}
}

논리 코드이므로 코드 양이 많지 않으니 테스트할 때 세부 사항에 주의하세요.

위 내용은 JavaScript 기반의 양식 비밀번호를 숨기고 표시하기 위해 편집자가 공유한 전체 내용입니다. 모든 분들께 도움이 되길 바랍니다!