如何在Vue.js中使用onfocusout函数实现文本框失焦时触发函数调用

嘿，这个需求在Vue里用focusout事件就能完美解决！不管是按Tab键切换，还是点击其他输入框离开当前框，只要输入框失去焦点就会触发指定函数。下面给你几种实用的实现方式：

这是最直观的方式，直接在需要监听的输入框上用@focusout（也就是v-on:focusout的简写）绑定你的处理函数：

<template>
  <div class="input-group">
    <input 
      type="text" 
      v-model="username" 
      @focusout="handleInputBlur" 
      placeholder="请输入用户名"
    />
    <input 
      type="email" 
      v-model="email" 
      @focusout="handleInputBlur" 
      placeholder="请输入邮箱"
    />
    <input 
      type="password" 
      v-model="password" 
      @focusout="handleInputBlur" 
      placeholder="请输入密码"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      email: '',
      password: ''
    }
  },
  methods: {
    handleInputBlur(event) {
      // 这里写你要执行的逻辑
      console.log(`输入框 "${event.target.placeholder}" 已失去焦点，当前值：${event.target.value}`);
      // 比如做表单校验、字段格式化这类操作都可以放在这里
    }
  }
}
</script>

小提示：如果需要区分是哪个输入框触发的事件，可以通过event.target获取到当前输入框的DOM元素，进而拿到它的value、placeholder等属性。

如果页面上有大量输入框，一个个绑定事件太繁琐，可以利用focusout支持事件冒泡的特性，在父容器上做事件委托：

<template>
  <!-- 在父容器上绑定focusout事件 -->
  <div class="input-group" @focusout="handleInputBlur">
    <input type="text" v-model="field1" placeholder="字段1" />
    <input type="text" v-model="field2" placeholder="字段2" />
    <input type="text" v-model="field3" placeholder="字段3" />
    <!-- 更多输入框... -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      field1: '',
      field2: '',
      field3: ''
    }
  },
  methods: {
    handleInputBlur(event) {
      // 确保事件是由输入框触发的，避免父容器内其他元素干扰
      if (event.target.tagName === 'INPUT') {
        console.log(`处理字段：${event.target.placeholder}，值：${event.target.value}`);
        // 执行你的业务逻辑
      }
    }
  }
}
</script>

这种方式更高效，尤其是输入框是动态生成（比如用v-for循环渲染）的场景，不需要额外处理事件绑定。

• 别搞混focusout和blur：blur事件不支持冒泡，只能给单个元素绑定；而focusout支持冒泡，适合批量监听或者事件委托的场景，刚好匹配你的需求。
• 如果用了第三方UI组件库（比如Element UI、Ant Design Vue）的输入组件，可能需要用.native修饰符绑定原生的focusout事件，或者直接监听组件提供的blur事件（比如Element UI的el-input就有blur事件）：

  <el-input v-model="username" @blur="handleInputBlur"></el-input>
  

内容的提问来源于stack exchange，提问作者dexter