uni-app input组件数字类型删除小数点后的数字光标会自动跑到前面

uni-app input组件数字类型删除小数点后的数字光标会自动跑到前面

示例代码:

<input type="number" v-model="value" placeholder="带小数点的数字键盘" />
const value = ref(null)

操作步骤:

一、问题1:

input组件type设置成number,输入1.23,然后失焦,再聚焦,删除32,光标会位移到1前面,而不是停留在小数点后面  

二、问题2:

input组件输入456,然后失焦,再聚焦光标移到4的后面,输入小数点.,再失焦,小数点会消失

预期结果:

光标位置偏移,小数点消失

实际结果:

光标位置会偏移,小数点会消失

bug描述:

进入官方示例:官方示例,选择带小数点的input

一、问题1:

input组件type设置成number,输入1.23,然后失焦,再聚焦,删除32,光标会位移到1前面,而不是停留在小数点后面  

二、问题2:

input组件输入456,然后失焦,再聚焦光标移到4的后面,输入小数点.,再失焦,小数点会消失
信息类别 信息内容
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 22621.2715
HBuilderX类型 正式
HBuilderX版本号 4.65
浏览器平台 Chrome
浏览器版本 138.0.7204.184
项目创建方式 HBuilderX
App下载地址或H5网址 https://hellouniapp.dcloud.net.cn/pages/component/input/input

更多关于uni-app input组件数字类型删除小数点后的数字光标会自动跑到前面的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

你好 我刚测了一下 浏览器/手机均未复现出这个问题 你用官方示例再试试呢 看下会不会出现这个问题 官方示例:https://hellouniapp.dcloud.net.cn/pages/component/input/input

更多关于uni-app input组件数字类型删除小数点后的数字光标会自动跑到前面的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我刚试了下,你给的官方示例能重现这问题噢,你要测试 “带小数点的 input”下面的这个文本框

我改了帖子,你看看第二个问题,输入整数后再加一个小数点,失焦后小数点会消失,官方示例:https://hellouniapp.dcloud.net.cn/pages/component/input/input可复现

这是一个已知的uni-app input组件在H5平台上的行为差异问题。当type设置为"number"时,浏览器原生的数字输入控件会强制格式化值,导致光标位置异常和小数点自动清除。

问题1的光标偏移是因为浏览器在重新渲染格式化后的数值时,没有正确保持光标位置。问题2的小数点消失是因为浏览器认为"456."不是有效的数字格式,失焦时自动移除了末尾的小数点。

临时解决方案:

  1. 使用type="text"配合inputmode="decimal"来启用数字键盘但避免浏览器强制格式化
<input type="text" inputmode="decimal" v-model="value" />
  1. 或者使用正则表达式手动控制输入格式
const handleInput = (e) => {
  value.value = e.detail.value.replace(/[^\d.]/g, '')
}
回到顶部