HTML DOM Input Search maxLength 속성이란?
HTML DOM의 Input Search maxLength 속성은 검색 입력 필드(<input type="search">)의 maxlength 속성 값을 설정하거나 반환하는 데 사용됩니다. 이 속성을 활용하면 사용자가 검색 필드에 입력할 수 있는 최대 문자 수를 자바스크립트로 동적으로 제어할 수 있습니다.
예를 들어, 초기에는 5자까지만 입력 가능하도록 제한했다가, 버튼 클릭과 같은 특정 이벤트 발생 시 최대 글자 수를 늘리거나 줄이는 식의 유연한 구현이 가능합니다.
문법(Syntax)
maxLength 속성 설정하기
passwordObject.maxLength = integer
여기서 integer는 해당 검색 필드에 입력할 수 있는 최대 문자 수를 의미합니다. 별도로 지정하지 않으면 기본값은 524288로 설정되며, 이는 사실상 사실상 무제한에 가까운 값입니다.
예제(Example)
다음은 maxLength 속성을 활용한 실전 예제입니다. 버튼을 클릭하면 검색 필드의 최대 입력 글자 수가 5에서 15로 변경됩니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input Search maxLength Property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits" maxlength="5">
</form>
<p>아래 버튼을 클릭하면 위 검색 필드의 최대 입력 글자 수가 늘어납니다</p>
<button onclick="changeMax()">CHANGE LENGTH</button>
<p id="Sample"></p>
<script>
function changeMax() {
document.getElementById("SEARCH1").maxLength = "15";
document.getElementById("Sample").innerHTML = "최대 입력 글자 수가 15로 증가했습니다";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 초기 상태에서는 검색 필드에 최대 5자까지만 입력할 수 있습니다.
그러나 CHANGE LENGTH 버튼을 클릭하면 다음과 같이 최대 입력 글자 수가 15로 변경됩니다.
코드 상세 분석
1. 검색 입력 필드 생성
먼저 type="search", id="SEARCH1", name="fruits" 속성을 가진 <input> 요소를 생성하고, maxlength 속성을 5로 지정했습니다. 이 속성으로 인해 해당 검색 필드에는 최대 5자까지만 입력할 수 있으며, 이 입력 필드는 폼(form) 내부에 위치합니다.
<form> FRUITS: <input type="search" id="SEARCH1" name="fruits" maxlength="5"> </form>
2. 버튼 생성 및 이벤트 연결
다음으로 CHANGE LENGTH 버튼을 만들고, 사용자가 클릭하면 changeMax() 함수가 실행되도록 onclick 이벤트와 연결했습니다.
<button onclick="changeMax()">CHANGE LENGTH</button>
3. changeMax() 함수 구현
changeMax() 함수는 getElementById() 메서드를 통해 해당 검색 입력 필드에 접근한 뒤, maxLength 속성을 15로 변경합니다. 이어서 innerHTML 속성을 사용해 id가 "Sample"인 단락(<p>)에 변경 결과 메시지를 표시하여 사용자에게 변화를 시각적으로 알려줍니다.
function changeMax() {
document.getElementById("SEARCH1").maxLength = "15";
document.getElementById("Sample").innerHTML = "최대 입력 글자 수가 15로 증가했습니다";
}정리
HTML DOM의 Input Search maxLength 속성은 검색 필드의 최대 입력 글자 수를 읽고 쓸 수 있는 강력한 도구입니다. HTML 태그에 직접 maxlength 속성을 명시하는 정적 방식과 달리, 자바스크립트를 통해 런타임 중에 동적으로 변경할 수 있다는 점이 큰 장점입니다. 사용자 입력 유효성 검사나 조건부 입력 제한 등 다양한 UI 시나리오에서 유용하게 활용할 수 있습니다.