uni-app 表单input组件type为digit时 输入整数后光标移至最前输入0.失焦小数点丢失

在uni-app中，当表单的<input>组件的type属性设置为digit时，确实会遇到一些特定的行为，比如你提到的输入整数后光标移至最前输入0，并且在输入框失焦（失去焦点）时小数点会丢失。这通常是由于digit类型的输入框限制只能输入数字（包括整数和小数点后的数字），但输入逻辑上可能有些不一致。

为了解决这个问题，我们可以通过监听输入事件来手动处理输入内容，确保输入符合我们的预期。以下是一个示例代码，展示了如何使用JavaScript和Vue的事件处理机制来管理这种输入：

<template>
  <view>
    <input
      type="text"
      v-model="inputValue"
      @input="handleInput"
      @blur="handleBlur"
      placeholder="请输入数字"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(event) {
      const value = event.target.value;
      // 只允许输入数字和一个小数点
      const regex = /^(\d*\.)?\d*$/;
      if (regex.test(value)) {
        // 如果用户输入了小数点但后面没有数字，允许这种情况
        if (value.endsWith('.') && !value.match(/\.\d+/)) {
          this.inputValue = value;
        } else {
          // 去除多余的小数点
          this.inputValue = value.replace(/\.{2,}/g, '.');
          // 确保小数点后最多只有两位数字（可选）
          this.inputValue = this.inputValue.replace(/(\.\d{2})\d+/, '$1');
        }
      } else {
        // 如果输入不匹配，恢复到最后一次有效值
        this.$nextTick(() => {
          const input = this.$el.querySelector('input');
          input.value = this.inputValue;
          input.setSelectionRange(this.inputValue.length, this.inputValue.length);
        });
      }
    },
    handleBlur() {
      // 在这里可以进一步处理失焦后的逻辑，比如去除多余的小数点（如果前面没有数字）
      if (this.inputValue.startsWith('.')) {
        this.inputValue = '0' + this.inputValue;
      } else if (this.inputValue.endsWith('.') && !this.inputValue.match(/\.\d+/)) {
        this.inputValue = this.inputValue.slice(0, -1);
      }
    }
  }
};
</script>

在这个示例中，我们通过监听@input事件来实时验证并修正用户输入，确保只接受有效的数字和小数点组合。同时，在@blur事件中，我们处理了一些边缘情况，比如单独的小数点或小数点后没有数字的情况。这样，即使使用type="digit"遇到一些问题，也能通过自定义逻辑来避免。