HTML DOM의 Input Text maxLength 속성은 텍스트 입력 필드(input type="text")의 maxlength 속성 값을 가져오거나 설정하는 데 사용됩니다. 이 속성을 활용하면 사용자가 텍스트 필드에 입력할 수 있는 최대 문자 수를 JavaScript로 동적으로 제어할 수 있습니다.
기본 개념
maxLength 속성은 텍스트 필드에 입력 가능한 최대 문자 수를 지정합니다. 예를 들어 값이 5로 설정되어 있다면, 사용자는 해당 필드에 5자까지만 입력할 수 있으며 그 이상의 문자는 자동으로 차단됩니다.
문법(Syntax)
maxLength 속성을 설정하는 문법은 다음과 같습니다.
textObject.maxLength = integer
여기서 integer는 텍스트 필드에 입력할 수 있는 최대 문자 수를 의미합니다. 반대로 현재 설정된 값을 읽어오려면 textObject.maxLength처럼 속성에 접근하기만 하면 됩니다.
예제(Example)
다음은 maxLength 속성을 실제로 활용한 예제입니다. 버튼을 클릭하면 기존에 5자로 제한되어 있던 입력 길이가 15자로 늘어나도록 구현했습니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input Text maxLength Property</h1>
USERNAME: <input type="text" id="USR" maxLength="5">
<p>아래 버튼을 클릭하면 위 필드의 최대 입력 문자 수가 늘어납니다</p>
<button onclick="changeMax()">CHANGE LENGTH</button>
<p id="Sample"></p>
<script>
function changeMax() {
document.getElementById("USR").maxLength = "15";
document.getElementById("Sample").innerHTML = "최대 입력 문자 수가 15자로 늘어났습니다";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 나타납니다. maxLength가 5로 설정되어 있으므로 처음에는 5자까지만 입력할 수 있습니다.
이후 CHANGE LENGTH 버튼을 클릭하면 maxLength 값이 15로 변경되어, 텍스트 필드에 최대 15자까지 입력할 수 있게 됩니다.
정리
maxLength 속성은 HTML 태그에 직접 maxlength를 작성하지 않고도 런타임 중에 입력 제한을 조절해야 하는 상황에서 매우 유용합니다. 예를 들어 회원 등급에 따라 닉네임 길이 제한을 다르게 적용하거나, 특정 조건 충족 시 입력 제한을 해제하는 등의 동적 폼 처리에 활용할 수 있습니다.