반응형
vue.js에서 onfocusout 기능을 사용하는 방법?
커서가 한 텍스트 상자에서 다음 텍스트 상자로 이동하는 즉시 함수를 호출하고 싶다.기능 호출은 탭 클릭 시 또는 예상 입력 후 다음 항목으로 이동해야 한다.
명령어를 사용하여 다음에 대한 이벤트 수신기 추가<input>
:
v-on:EVENT_NAME="METHOD"
예:
<input v-on:blur="handleBlur">
또는 더 짧은 구문:
@EVENT_NAME="METHOD"
예:
<input @blur="handleBlur">
new Vue({
el: '#app',
methods: {
handleBlur(e) {
console.log('blur', e.target.placeholder)
},
handleFocusout(e) {
console.log('focusout', e.target.placeholder)
}
}
})
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<div id="app">
<fieldset>
<legend>blur</legend>
<input @blur="handleBlur" placeholder="first name">
<input @blur="handleBlur" placeholder="last name">
</fieldset>
<fieldset>
<legend>focusout</legend>
<input @focusout="handleFocusout" placeholder="email">
<input @focusout="handleFocusout" placeholder="phone">
</fieldset>
</div>
참조URL: https://stackoverflow.com/questions/49974289/how-to-use-onfocusout-function-in-vue-js
반응형
'Programing' 카테고리의 다른 글
Vuex: 소방기지 라우팅.if 문 (0) | 2022.04.13 |
---|---|
vue 2 구성 요소가 포함된 vue 라우터가 5.8과 함께 작동하지 않음 (0) | 2022.04.13 |
페이지 로드 시 기능을 호출하기 위해 Vue.js2에서 사용할 라이프사이클 후크를 선택하십시오. (0) | 2022.04.12 |
Composition API를 사용하여 Vuex name leted getter를 사용하는 방법 (0) | 2022.04.12 |
VueJS $store.dispatch에서 여러 매개 변수 전송 (0) | 2022.04.12 |