[attribute] HTML - onsearch 속성 - search타입 input창에서 Enter키 누르거나 × 클릭 시 실행 (= onsearch속성 = 온서치속성) ※ onsearch이벤트 = 온서치이벤트

1. onsearch 예제 - <input type="search"> 경우
2. onsearch 정의
3. onsearch 구문

onsearch 예제 - <input type="search"> 경우

※ 텍스트 입력 후 Enter키 누르거나, 입력창 우측의 &times 누르면 실행.

 

<input type="search" id="hz" onsearch="homzzang()">

<p id="demo"></p>

<script>

function homzzang() {

   var x = document.getElementById("hz");

   document.getElementById("demo").innerHTML = "입력한검색:" + x.value;

}

</script>

 

결과보기

onsearch 정의

 

<input type="search"> 입력창에서 내용 입력 후 Enter키 누르거나 입력창 우측의 &times 버튼 클릭 시 실행할 코드 지정.

 

---

 

1. onsearch 속성 사용 가능 태그 종류

<input type="search">

2.

• Chrome, Safari, Opera 브라우저는 지원 O
• IE, Edge, Firefox 브라우저는 지원 X

onsearch 구문

 

HTML 방식

• <input type="search" onsearch="myScript">

 

JS 방식 (3가지)

• object.onsearch = ()=>{myScript};
• object.onsearch = function(){myScript};
• object.addEventListener("search", myScript);

---

[속성값]

 

myScript

<input type="search"> 입력창에 검색어 입력 후 Enter키 누르거나 입력창 우측의 × 클릭 시, 실행할 JS 코드

 

• 주의: 함수명 사용 시, 다른 곳은 전부 소괄호까지 사용해 함수 호출하나 핑크색 myScript 자리는 "함수명만" 사용해 함수 호출.
• 사용 방식 통일 권장.