input框，type="number" 在有的浏览器输入小数点时，光标会自动跑到最前面去，怎么解决？

Question

在做项目时，因为用到比较多的输入金额的input框，设置type="number"，用户在使用时反馈输入小数点光标会跑最前面去。应该是浏览器差异的原因，但网上很少能找到相应的答案。请问大家有没有遇到类似的问题，最后怎么解决的。

Answer 1

你可以参考一下这个处理方式

<input type="text" id="numberInput" oninput="validateInput(this)" />

function validateInput(input) {
  // 允许输入数字和小数点
  const regex = /^(\d*\.?\d*)$/;

  if (!regex.test(input.value)) {
    // 移除非法字符
    input.value = input.value.replace(/[^0-9.]/g, '');

    // 仅允许一个小数点
    const parts = input.value.split('.');
    if (parts.length > 1) {
      input.value = `${parts[0]}.${parts.slice(1).join('')}`;
    }
  }
}

Answer 2

写一个自定义指令，支持输入浮点数的，type=number有好多坑的