如何在vue.js中使用onfocusout函数?

2024-01-28

我想在光标从一个文本框移动到下一个文本框时立即调用一个函数。单击选项卡时或输入预期条目并移至下一个条目后,应调用该函数。


Use the v-on指示 https://v2.vuejs.org/v2/guide/events.html#Method-Event-Handlers添加事件监听器blur https://developer.mozilla.org/en-US/docs/Web/Events/blur or focusout https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event on the <input>:

v-on:EVENT_NAME="METHOD"

Example:

<input v-on:blur="handleBlur">

或者更短的语法:

@EVENT_NAME="METHOD"

Example:

<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/[email protected] /cdn-cgi/l/email-protection/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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在vue.js中使用onfocusout函数? 的相关文章