HTML DOM 입력 텍스트 자동완성 속성이란?
HTML DOM의 입력 텍스트 자동완성(autocomplete) 속성은 type="text"로 지정된 <input> 요소의 autocomplete 속성과 연결되어 있습니다. 이 속성은 "on" 또는 "off" 두 가지 값을 가질 수 있으며, 각 값의 의미는 다음과 같습니다.
- on: 웹 브라우저가 사용자가 이전에 입력한 내용을 기반으로 텍스트 입력을 자동으로 완성합니다.
- off: 브라우저가 이전 입력 내용을 기반으로 자동완성 기능을 수행하지 않습니다.
기본값은 on으로 설정되어 있습니다.
문법(Syntax)
자동완성 속성을 설정하는 문법은 다음과 같습니다.
textObject.autocomplete = "on|off"
여기서 on은 브라우저가 이전 입력 내용을 바탕으로 사용자의 입력을 자동으로 완성하도록 하고, off는 이전 입력을 참조하지 않고 자동완성을 비활성화한다는 의미입니다.
예제(Example)
다음은 입력 텍스트 자동완성 속성을 활용한 실제 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input text autocomplete property</h1>
<form action="/Sample_page.php">
USERNAME: <input type="text" id="TEXT1" name="USR" autocomplete="on"><br><br>
<input type="submit">
</form>
<p>아래 버튼을 클릭하여 위 텍스트 필드의 자동완성을 끌 수 있습니다.</p>
<button onclick="changeAuto()">Autocomplete Off</button>
<p id="Sample"></p>
<script>
function changeAuto() {
document.getElementById("TEXT1").autocomplete = "off";
document.getElementById("Sample").innerHTML = "이제 텍스트가 자동완성되지 않습니다.";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
텍스트 필드에 내용을 입력하고 여러 번 제출해 보면, 이전에 입력했던 내용을 기반으로 자동완성이 작동하는 것을 확인할 수 있습니다.
이후 "Autocomplete Off" 버튼을 클릭하면 자동완성 기능이 해제됩니다.
정리
HTML DOM의 autocomplete 속성을 활용하면 JavaScript를 통해 런타임 중에도 입력 필드의 자동완성 동작을 손쉽게 제어할 수 있습니다. 개인정보 입력란이나 검색창 등 자동완성이 적절하지 않은 상황에서는 이 속성을 "off"로 설정하여 사용자 경험을 개선할 수 있습니다.