uni-app uni-easyinput type=number 报Bug:第一次输入小数点后光标自动跳回输入框最前方,且小数点不被输入

uni-app uni-easyinput type=number 报Bug:第一次输入小数点后光标自动跳回输入框最前方,且小数点不被输入

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 win11
HBuilderX类型 正式
HBuilderX版本 4.15
手机系统 Android
手机版本号 Android 14
手机厂商 华为
手机机型 mate60 pro
页面类型 vue
Vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码:

<uni-easyinput type="number" v-model="this.boxWeight"></uni-easyinput>

操作步骤:

uni-easyinput type = number 第一次输入小数点后光标会自动跳回到输入框的最前方,并且点不会被输入

预期结果:

uni-easyinput type = number 第一次输入小数点后光标会自动跳回到输入框的最前方,并且点不会被输入

实际结果:

uni-easyinput type = number 第一次输入小数点后光标会自动跳回到输入框的最前方,并且点不会被输入

bug描述


更多关于uni-app uni-easyinput type=number 报Bug:第一次输入小数点后光标自动跳回输入框最前方,且小数点不被输入的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

更多关于uni-app uni-easyinput type=number 报Bug:第一次输入小数点后光标自动跳回输入框最前方,且小数点不被输入的实战教程也可以访问 https://www.itying.com/category-93-b0.html


非常感谢

回复 3***@qq.com: 您好,请问您是参考https://ask.dcloud.net.cn/question/190763这个解决的吗

uni-app 中使用 uni-easyinput 组件时,如果 type 设置为 number,并且遇到输入小数点时光标跳回输入框最前方且小数点不被输入的问题,这可能是由于组件的内部处理逻辑导致的。以下是一些可能的解决方案和排查步骤:

1. 检查 uni-easyinput 版本

确保你使用的是最新版本的 uni-easyinput 组件。开发者可能已经修复了这个 Bug,更新到最新版本可能会解决问题。

2. 使用 input 事件手动处理输入

你可以监听 input 事件,并在事件处理函数中手动处理输入内容,确保小数点的正确输入。

<template>
  <uni-easyinput
    type="number"
    v-model="inputValue"
    @input="handleInput"
  />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(value) {
      // 手动处理输入内容,确保小数点正确输入
      this.inputValue = value;
    }
  }
};
</script>

3. 使用 text 类型并手动校验

如果 type="number" 导致问题,你可以使用 type="text",并通过正则表达式或自定义校验逻辑来确保输入的是合法的数字。

<template>
  <uni-easyinput
    type="text"
    v-model="inputValue"
    @input="handleInput"
  />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(value) {
      // 使用正则表达式确保输入的是合法的数字
      if (/^\d*\.?\d*$/.test(value)) {
        this.inputValue = value;
      }
    }
  }
};
</script>
回到顶部