uni-app input的type设置为digit时,在h5与app平台上，会出现输入小数点时，光标自动回到开头的问题

在 uni-app 中，当 input 组件的 type 设置为 digit 时，在 H5 和 App 平台上可能会出现输入小数点时，光标自动回到开头的问题。这个问题通常是由于平台对 digit 类型的处理方式不同导致的。

解决方案

1. 使用 type="number" 代替 type="digit"

   • type="number" 在大多数平台上可以正常处理小数点的输入，并且不会出现光标跳转的问题。
   • 但需要注意的是，type="number" 在某些平台上可能会限制输入的内容为数字和小数点。

   <input type="number" v-model="inputValue" />
   

2. 使用 inputmode="decimal"

   • inputmode="decimal" 可以让输入框在移动设备上显示数字键盘，并且允许输入小数点。
   • 这种方法不会出现光标跳转的问题。

   <input inputmode="decimal" v-model="inputValue" />
   

3. 自定义输入验证

   • 如果你需要更精确的控制输入内容，可以使用 type="text" 并自定义输入验证逻辑，确保用户只能输入数字和小数点。

   <input type="text" v-model="inputValue" [@input](/user/input)="validateInput" />
   
   <script>
   export default {
     data() {
       return {
         inputValue: ''
       };
     },
     methods: {
       validateInput(event) {
         this.inputValue = event.target.value.replace(/[^0-9.]/g, '');
       }
     }
   };
   </script>
   

4. 使用 uni-app 的 input 事件

   • 通过监听 input 事件，可以手动处理输入内容，避免光标跳转问题。

   <input type="text" v-model="inputValue" [@input](/user/input)="handleInput" />
   
   <script>
   export default {
     data() {
       return {
         inputValue: ''
       };
     },
     methods: {
       handleInput(event) {
         this.inputValue = event.detail.value;
       }
     }
   };
   </script>