Programing

vue.js에서 onfocusout 기능을 사용하는 방법?

c10106 2022. 4. 12. 22:24
반응형

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

반응형