[JavaScript] Event-onFocus, onBlur

focus, blur?

//예시 코드
<style>
  .invalid { border-color: red; }
  #error { color: red }
</style>

이메일: <input type="email" id="input">

<div id="error"></div>

<script>
input.onblur = function() {
  if (!input.value.includes('@')) { // @ 유무를 이용해 유효한 이메일 주소가 아닌지 체크
    input.classList.add('invalid');
    error.innerHTML = '올바른 이메일 주소를 입력하세요.'
  }
};

input.onfocus = function() {
  if (this.classList.contains('invalid')) {
    // 사용자가 새로운 값을 입력하려고 하므로 에러 메시지를 지움
    this.classList.remove('invalid');
    error.innerHTML = "";
  }
};
</script>

focus 이벤트는 요소가 포커스를 받을 때, blur 이벤트는 포커스를 잃을 때 발생

• blur 핸들러에선 필드에 이메일이 잘 입력되었는지 확인하고, 잘 입력되지 않은 경우에 에러를 보여줌
• focus 핸들러에서는 에러 메세지를 숨김
• focus와 blur 이벤트는 버블링 되지 않음.
  • 캡처링이나 focusin ,focusout 을 사용하면 이벤트 위임 효과를 볼 수 있음
• 현재 포커스된 요소는 document.activeElement를 통해 확인할 수 있음

focus 가능한 HTML요소

대화형 요소

• a
• button
• details
• input
• select
• textarea

이외의 요소는 비대화형 요소로 칭함.

 💡 비대화형 요소에도 강제로 tabindex를 사용해 포커싱을 줄 수 있음

 

tabindex - 포커싱 기능 부여

• tabindex=’숫자값’ 형태로 사용
• 숫자값이 작은값→큰값의 순서로 HTML 요소가 포커싱
• 숫자값으로 음수를 줄 수도 있는데, (보통-`) 음수를 주게 되면 키입력으로 포커싱은 안됨
• 마우스 클릭이나 focus() 메소드로는 포커싱이 가능
• tabindex는 사용자 접근성과 관련있는 부분이므로 남용하지말고 꼭 필요한 경우에만 사용

<div tabindex='1'>A</div>
<div tabindex='3'>B</div>
<div tabindex='2'>C</div>
//Tab키 입력 시 A -> C -> B 순으로 div 태크가 포커싱

relatedTarget

• onblur 이벤트가 발생했을 때 인자로 받는 event 객체 안에 relatedTarget이 같이 담김.
• relatedTarget은 이벤트의 보조 대상을 식별

<input name='id' onblur='onblur()'/>
<input name='pw'/>

<script>
    function onblur(e){
    	console.log(e.currentTarget); // A
    	console.log(e.relatedTarget); // B
    }
</script>

• id input을 클릭한 후 pw 클릭 => A에는 id input이 담겨있고, B에는 pw input이 담김
• 그러나, id input이 클릭된 상태에서 pw input이 아닌 빈공간 아무곳을 클릭하게 되면 null이 출력.
• 포커싱된 상태인 어떤 html 요소가 사용자의 마우스 클릭 등에 의해 포커싱 해제될 때
  • 다음으로 포커싱 될 html 요소가 related target에 담겨짐

React에서 focus, blur 하는 법

• react에서는 onFocus, onBlur 두 가지만 있다. 따라서 포커스가 떠남을 표현하고자 할 때는 onBlur를 사용
• onBlur를 사용할 때는 tabIndex속성을 같이 사용해줘야 onBlur이벤트가 트리거
  • 단, onBlur 이벤트는 onClick 이벤트와 같이 사용하게 될 시 순서가 꼬일 수 있음
  • onMouseDown으로 변경하면 해결 됨
    • onMouseDown→onBlur→onClick

Reference

Element: blur event - Web APIs | MDN

자바스크립트 onfocus 와 onblur 그리고 relatedTarget

focus와 blur

내외부 구분, onBlur on react

React.js - focus, blur 예제

React(리액트): input 상태 관리하기, input 여러 개