HTML DOM 입력 비밀번호 readOnly 속성은 입력 비밀번호 필드가 읽기 전용인지 여부를 설정하거나 반환하는 데 사용됩니다. readOnly 속성은 요소를 편집할 수 없도록 만들지만 여전히 탭이나 클릭으로 포커스를 맞출 수 있습니다. 읽기 전용 요소 내부에 기본값이 있으면 제출 시 서버로 전송됩니다.
구문
다음은 −
의 구문입니다.readOnly 속성 설정 -
passwordObject.readOnly = true|false
여기서 true는 비밀번호 필드가 읽기 전용임을 나타내고 false는 그렇지 않은 경우를 나타냅니다. readOnly 속성은 기본적으로 false로 설정됩니다.
예시
비밀번호 readOnly 속성에 대한 예를 살펴보겠습니다 -
<!DOCTYPE html>
<html>
<body>
<h1>password readOnly property</h1>
Password: <input type="password" id="PASS1" >
<p>Change the readOnly property of the above field by clicking the below button</p>
<button onclick="changeRead()">CHANGE</button>
<script>
function changeRead() {
document.getElementById("PASS1").readOnly = true;
}
</script>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
CHANGE 버튼을 클릭하면. 이제 입력 암호 상자에 입력할 수 없습니다. −
위의 예에서 -
먼저 ID가 "PASS1"인 입력 암호 필드를 만들었습니다.
Password: <input type="password" id="PASS1">
그런 다음 사용자가 클릭할 때 changeRead() 메서드를 실행하는 CHANGE 버튼을 만들었습니다.
<button onclick="changeRead()">CHANGE</button>
changeRead() 메서드는 getElementById() 메서드를 사용하여 암호 유형의 입력 요소를 가져옵니다. 그런 다음 readOnly 속성을 true로 설정합니다. 즉, 지금은 암호 필드에 텍스트를 입력할 수 없지만 여전히 집중할 수 있습니다. 제출 버튼을 클릭하면 내부의 텍스트가 서버로 전송됩니다 -
function changeRead() {
document.getElementById("PASS1").readOnly = true;
}