HTML - span 태그에서 onblur 적용하기.

 

[HTML] span 태그에서 onblur 적용하기. 

 

 

 

 

 

사실 span은 일반적으로 onblur를 사용할 수가 없다.

마찬가지로 div도 onblur를 사용할 수가 없다.

 

onblur나 focus는 "입력요소"(예를들어 input)만 적용할 수 있다.

 

하지만 꼭! 써야되는 상황이 있었다.

 

 

<div>

        <span id='span' onblur='test();' tabindex="0">TEST</span>

 </div>

 

span 태그에 "tabindex"를 0으로 설정하여 focus를 주는 방식이 있었다.

 

tabindex 관련 자료는 구글 검색에서도 많이 볼 수 있다.

 

tabindex를 0으로 줬을 시 focus가 생기는데 이때 선택된 엘리먼트에 테두리가 생기는 현상이 생겼다.

 

span {

     outline: none;/* 선택을 했을 때 테두리가 보이는 현상을 처리 */

}

 

tabindex를 설정 할 시 Chrome 브라우저에서만 생기는 부분인데 focus가 들어가면 Chrome 특유의 파란 테두리가 생기는데 이것을 CSS로 outline을 none으로 줘서 테두리가 생기는 문제를 해결하였다.

 

span 태그에 focus를 주면 해결되는 문제다.