JavaScript如何实现输入框失焦时获取输入值 附AntD Vue代码示例

实现方案 #

1. 修改模板代码 #

给<a-input>添加双向绑定v-model和失焦事件@blur，示例如下：

<a-form-item label="user" :colon="false">
    <a-input 
      placeholder="user" 
      name="user" 
      v-model="userInput"
      @keyup.enter="checkUser"
      @blur="checkUser"
    />
</a-form-item>

2. 调整逻辑代码 #

先在data中声明绑定的变量，再修改checkUser方法直接读取绑定值即可：

export default {
  data() {
    return {
      // 存储输入框的输入值
      userInput: ''
    }
  },
  methods: {
    checkUser() {
      // 直接获取输入框当前的输入值
      const currentValue = this.userInput
      console.log('当前输入值：', currentValue)
      // 原有业务逻辑
      console.log('ok')
    }
  }
}

说明 #

• @blur是输入框原生支持的失焦事件，光标移出输入框、输入框失去焦点时会自动触发绑定的方法
• 若不需要保留回车触发逻辑，直接删除@keyup.enter="checkUser"配置即可
• 如果你不想新增双向绑定变量，也可以通过事件对象直接获取输入值：
  模板改为@blur="checkUser($event)"，方法调整为：

  checkUser(e) {
    const currentValue = e.target.value
    console.log('当前输入值：', currentValue)
  }
  

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