uniapp @blur事件使用方法

在uniapp中使用@blur事件时遇到问题，请问如何正确绑定和使用？我在input组件上添加了@blur="handleBlur"方法，但触发时没有效果。需要引入特殊配置吗？还是uniapp对@blur事件有特殊用法？求具体示例代码和注意事项。

2 回复

在uniapp中，@blur事件用于输入框失去焦点时触发。使用方法：

<input [@blur](/user/blur)="handleBlur" placeholder="输入内容" />

methods: {
  handleBlur(e) {
    console.log('输入框失去焦点', e.detail.value)
  }
}

适用于input、textarea等表单元素。


在 UniApp 中，@blur 事件用于在输入框、文本框等表单元素失去焦点时触发相应操作。它常用于表单验证、数据保存或隐藏键盘等场景。以下是使用方法及示例：

基本语法

在模板中，使用 @blur 绑定事件处理函数：

<input type="text" @blur="onBlur" placeholder="输入内容" />

示例代码

在 Vue 页面中定义方法：

<template>
  <view>
    <input 
      type="text" 
      @blur="handleBlur" 
      placeholder="请输入内容" 
      v-model="inputValue"
    />
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      message: ''
    };
  },
  methods: {
    handleBlur() {
      // 失去焦点时触发
      this.message = '输入已完成，内容为：' + this.inputValue;
      // 可选：隐藏键盘（App/小程序端）
      uni.hideKeyboard();
    }
  }
};
</script>

注意事项

  1. 适用组件：input、textarea 等支持焦点的表单组件。
  2. 平台差异：H5 端行为与 Web 一致，小程序端需确保组件支持该事件。
  3. 结合 v-model：通常与 v-model 配合使用，以获取输入值。

扩展场景

  • 表单验证：在 @blur 时检查输入内容格式。
  • 自动保存：输入框失焦后自动提交数据。

通过以上方法，您可以灵活使用 @blur 事件优化交互体验。

回到顶部