[JS] focus, blur Event

// PhoneNumberInput에 사용자가 focus하면  focusOnMobile값이 true로 바뀌면서 
툴팁 content가 보이고, blur할 경우 focusOnMobile값이 false로 바뀌면서 툴팁 content가 안보이는 예제입니다


<template>
  <el-tooltip
    v-model="focusOnMobile"
    manual
    effect="light"
    content="회원 앱과 연결되는 중요한 정보입니다. 신중히 입력해주세요."
    placement="top"
  />

  <PhoneNumberInput
    v-model="data.mobile"
    placeholder="휴대폰 번호"
    :type="showMobileInput ? 'text' : 'password'"
    :readonly="!showMobileInput"
    @focus="focusOnMobile = true"
    @blur="focusOnMobile = false"
  />
</template>
<script>
date() {
	return {
		focusOnMobile: false
		//focus되면 툴팁이 보이고, blur되면 툴팁이 안보인다
	}
}
</script>

 

focus와 blur

 

focus : 요소가 해당 태그에 포커싱(클릭)했을 때 발생
blur : 해당 태그에 포커싱(클릭)  잃었을 때 발생

 

• 기본으로 제공하는 <button>, <input>, <select>, <a>에는 focus라는 기능이 존재한다. 데이터를 입력 할 준비가 되었다는 의미이다.
• blur는 포커스를 잃은 순간인데 요소가 포커스를 잃게 되면서 데이터를 체크해 요청을 보내는 활동을 한다.