uni-app input框的@blur方法失去焦点后，没获取到输入的字符串的最后一位

uni-app input框的@blur方法失去焦点后，没获取到输入的字符串的最后一位

2 回复

未复现此问题，请提供可复现bug的最小化demo（上传附件），让我们及时定位问题，及时修复 【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

更多关于uni-app input框的@blur方法失去焦点后，没获取到输入的字符串的最后一位的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，input 框的 @blur 事件在某些情况下可能会在输入框失去焦点时，无法获取到输入字符串的最后一位字符。这通常是因为 @blur 事件触发时，输入框的值还没有完全更新。

解决方案

  1. 使用 @input 事件：你可以在用户输入时实时更新输入框的值，而不是在失去焦点时才获取值。这样可以确保你始终获取到最新的输入内容。

    <template>
  <input v-model="inputValue" @input="handleInput" @blur="handleBlur" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(event) {
      this.inputValue = event.detail.value;
    },
    handleBlur() {
      console.log('失去焦点时的值:', this.inputValue);
    }
  }
};
</script>

  2. 使用 @change 事件：@change 事件在输入框失去焦点且值发生变化时触发，通常比 @blur 更可靠。

    <template>
  <input v-model="inputValue" @change="handleChange" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleChange(event) {
      console.log('输入框值发生变化时的值:', event.detail.value);
    }
  }
};
</script>

  3. 结合 @blur 和 @input：如果你仍然需要使用 @blur 事件，可以结合 @input 事件来确保在失去焦点时获取到最新的输入值。

    <template>
  <input v-model="inputValue" @input="handleInput" @blur="handleBlur" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(event) {
      this.inputValue = event.detail.value;
    },
    handleBlur() {
      console.log('失去焦点时的值:', this.inputValue);
    }
  }
};
</script>
回到顶部