uni-app input 输入数值有问题

uni-app input 输入数值有问题

产品分类：

uniapp/H5

PC开发环境操作系统：

Windows

PC开发环境操作系统版本号：

win10

HBuilderX类型：

正式

HBuilderX版本号：

3.1.19

浏览器平台：

Chrome

浏览器版本：

91

项目创建方式：

HBuilderX

示例代码：

<template>
<view class="container">  
    输入数字<input type="number" maxlength="5" v-model="showValue" />  
    后台数值:{{showValue}}  
    <button @click="submit">提交</button>  
</view>  
</template>  

<script>
export default {
data() {
return {
showValue:'',
}
},
methods: {
submit(){
console.log(this.showValue);
}
}
}
</script>

操作步骤：

  • 第一步输入12345
  • 第二步移动光标到3与4之间
  • 第三步输入5
  • 最终显示12354

预期结果：

js return 的值应该为12354 ,或者不能输入，固定了长度后不能输入

实际结果：

  • 显示12354
  • js return 的值为12345

bug描述：

<input>组件再type是number，并且控制了maxlength的情况下，数值输入极限，移动光标向前再输入数值，显示的值与js中的值不一样. 还有就是希望能自定义小数点个数，输入指定位数小数点后，不能再输入值.

示例图片1 示例图片2


更多关于uni-app input 输入数值有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

bug已确认，已加分，后续修复

更多关于uni-app input 输入数值有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


HBuilder X 3.1.22 已修复

这是一个典型的 input type="number" 在移动端浏览器中的兼容性问题。当设置了 maxlength 属性时，浏览器对数字输入框的处理与普通文本框不同。

问题分析：

  1. type="number" 的输入框在移动端浏览器中会忽略 maxlength 属性限制
  2. 光标位置修改后的输入值更新存在延迟，导致 Vue 数据绑定未能及时同步
  3. 数字输入框在移动端会调起数字键盘，但长度限制需要额外处理

解决方案：

方案一：使用正则验证（推荐）

<input type="number" @input="handleInput" v-model="showValue" />

methods: {
  handleInput(e) {
    let value = e.detail.value;
    // 限制5位数字
    if (value.length > 5) {
      this.showValue = value.slice(0, 5);
    }
    // 限制小数点后2位
    if (value.includes('.')) {
      const parts = value.split('.');
      if (parts[1].length > 2) {
        this.showValue = parts[0] + '.' + parts[1].slice(0, 2);
      }
    }
  }
}

方案二：使用 text 类型配合数字验证

<input type="text" pattern="[0-9]*" maxlength="5" v-model="showValue" @input="validateNumber" />

methods: {
  validateNumber() {
    this.showValue = this.showValue.replace(/[^\d]/g, '');
    if (this.showValue.length > 5) {
      this.showValue = this.showValue.slice(0, 5);
    }
  }
}

小数点位数控制：

handleDecimalInput(value) {
  const decimalRegex = /^\d*(\.\d{0,2})?$/;
  if (!decimalRegex.test(value)) {
    // 回退到上一次有效值
    this.showValue = this.previousValue;
  } else {
    this.previousValue = value;
  }
}
回到顶部