uniapp 表单 focus 和 blur 事件用法

在 uniapp 中，表单元素的 focus 和 blur 事件用于处理输入框的聚焦和失焦行为。以下是具体用法和示例。

基本用法

在模板中为输入框绑定 focus 和 blur 事件：

<template>
  <view>
    <input 
      type="text" 
      @focus="handleFocus" 
      @blur="handleBlur" 
      placeholder="请输入内容"
    />
  </view>
</template>

在脚本中定义事件处理函数：

<script>
export default {
  methods: {
    handleFocus(event) {
      console.log('输入框聚焦', event.detail.value);
    },
    handleBlur(event) {
      console.log('输入框失焦', event.detail.value);
    }
  }
}
</script>

事件对象参数

focus 和 blur 事件会返回一个事件对象 event，包含以下常用属性：

• event.detail.value：输入框当前的值。
• event.detail.height（仅 focus 事件）：键盘高度（在部分平台如微信小程序中可用）。

动态控制样式

可以通过 focus 和 blur 事件动态修改输入框样式：

<template>
  <view>
    <input 
      type="text" 
      @focus="handleFocus" 
      @blur="handleBlur" 
      :style="inputStyle"
      placeholder="请输入内容"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputStyle: ''
    }
  },
  methods: {
    handleFocus() {
      this.inputStyle = 'border: 1px solid #007AFF;';
    },
    handleBlur() {
      this.inputStyle = '';
    }
  }
}
</script>

兼容性注意事项

1. 在部分平台（如 H5），blur 事件可能不会立即触发，需结合 change 或 input 事件使用。
2. 微信小程序中，focus 事件会返回键盘高度，可用于调整页面布局。

示例：自动聚焦和失焦提交

<template>
  <view>
    <input 
      type="text" 
      @focus="handleFocus" 
      @blur="submitForm" 
      v-model="inputValue"
      placeholder="输入后失焦自动提交"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleFocus() {
      console.log('输入框聚焦');
    },
    submitForm() {
      if (this.inputValue) {
        console.log('提交内容:', this.inputValue);
        // 调用提交逻辑
      }
    }
  }
}
</script>

通过以上方法，可以灵活处理表单的聚焦和失焦行为，实现交互逻辑和样式控制。