HTML의 onsearch 속성을 사용하면 사용자가 검색 필드에 내용을 입력한 후 ENTER 키를 누르거나 입력 필드의 'x' 버튼을 클릭했을 때 특정 스크립트를 실행할 수 있습니다.
onsearch 속성이란?
onsearch는 검색 필드(<input type="search">)에서 검색 동작이 수행될 때 발생하는 이벤트 핸들러입니다. 사용자가 검색어를 입력하고 ENTER 키를 누르거나, 필드 오른쪽의 지우기(x) 버튼을 클릭하면 이 이벤트가 트리거되어 지정된 자바스크립트 함수가 호출됩니다.
예제
아래 코드를 실행하면 onsearch 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<p>검색어를 입력한 후 ENTER 키를 누르세요.</p>
<input type = "search" id="inputID" onsearch = "display()">
<p><strong>참고:</strong> Internet Explorer와 Firefox에서는 작동하지 않습니다.</p>
<p id="test"></p>
<script>
function display() {
var a = document.getElementById("inputID");
document.getElementById("test").innerHTML = "검색어 - " + a.value;
}
</script>
</body>
</html>브라우저 호환성 주의 사항
중요: onsearch 이벤트는 Internet Explorer와 Firefox에서는 지원되지 않습니다. Chrome, Safari 등 WebKit 및 Blink 기반 브라우저에서 정상적으로 작동합니다.
모든 브라우저에서 동일한 기능을 구현해야 한다면, ENTER 키 입력을 감지하는 keydown 이벤트나 폼 제출을 활용하는 onsubmit 이벤트를 대안으로 고려하는 것이 좋습니다.