개요
HTML DOM의 Input Search disabled 속성은 검색 필드(<input type="search">)를 비활성화할지 여부를 설정하거나, 현재 비활성화 상태를 반환하는 데 사용됩니다. 이 속성은 불리언(Boolean) 값을 사용하며, true는 해당 요소를 비활성화하고, false는 활성화 상태를 유지한다는 의미입니다.
기본값은 false로 설정되어 있어, 별도로 지정하지 않으면 검색 필드는 항상 활성화된 상태로 표시됩니다. 반면 disabled 속성이 true로 설정된 요소는 기본적으로 회색으로 표시되며, 클릭이나 입력 등 어떠한 상호작용도 할 수 없게 됩니다.
문법(Syntax)
disabled 속성을 설정하는 문법은 다음과 같습니다.
searchObject.disabled = true|false
여기서 true는 검색 필드를 비활성화한다는 의미이고, false는 비활성화하지 않는다는 의미입니다. 아무 값도 지정하지 않으면 기본값인 false가 적용됩니다.
예제(Example)
Input Search disabled 속성의 실제 사용 예를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input search disabled Property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits">
</form>
<p>아래 DISABLE 버튼을 클릭하면 위 검색 필드가 비활성화됩니다</p>
<button type="button" onclick="disableSearch()">DISABLE</button>
<p id="Sample"></p>
<script>
function disableSearch() {
document.getElementById("SEARCH1").disabled=true;
document.getElementById("Sample").innerHTML = "The search field is now disabled";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
DISABLE 버튼을 클릭하면 다음과 같이 변경됩니다.
코드 분석
위 예제에서 각 부분이 어떻게 동작하는지 단계별로 살펴보겠습니다.
1. 검색 필드 생성
먼저 type="search", id="SEARCH1", name="fruits" 속성을 가진 <input> 요소를 폼 안에 생성합니다.
<form> FRUITS: <input type="search" id="SEARCH1" name="fruits"> </form>
2. DISABLE 버튼 생성
다음으로, 사용자가 클릭하면 disableSearch() 함수를 실행하는 버튼을 만듭니다.
<button type="button" onclick="disableSearch()">DISABLE</button>
3. disableSearch() 함수의 동작
disableSearch() 함수는 getElementById() 메서드를 사용하여 해당 input 요소를 가져온 뒤, 그 요소의 disabled 속성을 true로 설정합니다. 그 결과 검색 필드는 회색으로 변하면서 더 이상 클릭할 수 없게 되고, 사용자는 해당 필드와 상호작용할 수 없습니다. 동시에 Sample 문단에는 "검색 필드가 비활성화되었습니다"라는 메시지가 출력됩니다.
function disableSearch() {
document.getElementById("SEARCH1").disabled=true;
document.getElementById("Sample").innerHTML = "The search field is now disabled";
}마무리
이처럼 disabled 속성은 특정 조건에서 사용자의 입력을 막아야 하는 경우, 예를 들어 폼 제출 중이거나 필수 값을 먼저 입력해야 하는 상황 등에서 매우 유용하게 활용됩니다. 자바스크립트 한 줄만으로 검색 필드의 사용 가능 여부를 손쉽게 제어할 수 있다는 점이 큰 장점입니다.