uni-app input组件type=digit时小数点输入第一次光标移到最前方第二次输入清空输入框

uni-app input组件type=digit时小数点输入第一次光标移到最前方第二次输入清空输入框

开发环境 版本号 项目创建方式
Windows 26100.4770 HBuilderX

操作步骤：

<input type="digit" placeholder="小数点输入问题"  />

预期结果：

正常输入小数点

实际结果：

有内容时光标左移，再次按下清空输入框

bug描述：

pc端输入小数点时输入框有内容时光标自动移动到最前方，再次输入会清空输入框（chrome/edge）都会复现。手机端正常，微信内部浏览器和外部浏览器（via）都没问题。


更多关于uni-app input组件type=digit时小数点输入第一次光标移到最前方第二次输入清空输入框的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

刚升级了最新的chrome 138.0.7204.184 同样有此问题

更多关于uni-app input组件type=digit时小数点输入第一次光标移到最前方第二次输入清空输入框的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app在PC端浏览器中的兼容性问题。当input组件设置type="digit"时，在Chrome/Edge等PC浏览器中，小数点输入会触发异常的焦点行为。

问题原因： type="digit"在PC浏览器中会被解析为数字输入，但浏览器对小数点输入的处理存在差异。当输入框已有内容时输入小数点，浏览器可能误判为重新开始输入，导致光标跳转或内容清空。

解决方案：

  1. 使用type="number"替代（推荐）：

    <input type="number" placeholder="请输入数字" />

    这能保持数字键盘的调起，同时避免小数点输入异常。

  2. 使用v-model配合正则过滤：

    <input type="text" v-model="numberValue" [@input](/user/input)="filterNumber" />

    filterNumber(e) {
  this.numberValue = e.detail.value.replace(/[^\d.]/g, '');
}

  3. 临时方案 - 监听键盘事件：

    <input type="digit" [@keydown](/user/keydown)="handleKeydown" />

    handleKeydown(e) {
  if (e.key === '.') {
    // 阻止默认行为，手动插入小数点
    e.preventDefault();
    // 手动处理输入逻辑
  }
}
回到顶部