HTML DOM Input Password maxLength 속성이란?
HTML DOM의 maxLength 속성은 비밀번호 입력 필드(<input type="password">)의 maxlength 속성 값을 설정하거나 반환하는 데 사용됩니다. 이 속성을 활용하면 사용자가 비밀번호 필드에 입력할 수 있는 최대 문자 수를 JavaScript로 동적으로 제어할 수 있습니다.
예를 들어, 회원가입 폼에서 보안 정책에 따라 비밀번호 길이 제한을 변경해야 하는 경우, 페이지를 새로 고침하지 않고도 maxLength 속성으로 손쉽게 조정할 수 있습니다.
문법(Syntax)
maxLength 속성을 설정하는 기본 문법은 다음과 같습니다.
passwordObject.maxLength = integer
여기서 integer는 비밀번호 필드에 입력할 수 있는 최대 문자 수를 나타내는 정수 값입니다.
예제(Example)
다음 예제는 maxLength 속성을 실제로 활용하는 방법을 보여줍니다. 버튼을 클릭하면 비밀번호 필드의 최대 입력 길이가 5자에서 15자로 늘어납니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input Password maxLength Property</h1>
Password: <input type="password" id="PASS" maxLength="5">
<p>아래 버튼을 클릭하면 위 필드의 최대 입력 문자 수가 늘어납니다.</p>
<button onclick="changeMax()">CHANGE LENGTH</button>
<p id="Sample"></p>
<script>
function changeMax() {
document.getElementById("PASS").maxLength = "15";
document.getElementById("Sample").innerHTML = "최대 입력 문자 수가 15자로 늘어났습니다.";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 초기 상태에서는 비밀번호 필드에 최대 5자까지만 입력할 수 있습니다. 하지만 CHANGE LENGTH 버튼을 클릭한 후에는 더 많은 문자를 입력할 수 있게 됩니다.
예제 코드 상세 설명
1. 비밀번호 입력 필드 생성
먼저 id가 "PASS"인 비밀번호 입력 필드를 생성하고, maxLength 속성 값을 5로 설정했습니다. 이 경우 해당 필드에는 최대 5자까지만 입력이 가능합니다.
Password: <input type="password" id="PASS" maxLength="5">
2. 버튼 생성 및 이벤트 연결
그다음, 사용자가 클릭하면 changeMax() 함수를 실행하는 CHANGE LENGTH 버튼을 만들었습니다.
<button type="button" onclick="changeMax()">CHANGE LENGTH</button>
3. changeMax() 함수 구현
changeMax() 함수는 getElementById() 메서드를 사용해 비밀번호 타입의 입력 필드를 가져온 뒤, maxLength 속성을 15로 변경합니다. 그리고 innerHTML 속성을 통해 id가 "Sample"인 단락(<p>)에 변경 사항을 알리는 메시지를 표시합니다.
function changeMax() {
document.getElementById("PASS").maxLength = "15";
document.getElementById("Sample").innerHTML = "최대 입력 문자 수가 15자로 늘어났습니다.";
}마무리
이처럼 HTML DOM의 maxLength 속성을 사용하면 비밀번호 필드의 최대 입력 길이를 동적으로 읽거나 수정할 수 있습니다. 폼 유효성 검사나 사용자 경험 개선이 필요한 다양한 상황에서 유용하게 활용할 수 있으니, 직접 코드를 작성하며 연습해 보시기 바랍니다.