uni-app H5 input type="digit"时 ios连续点击小数点会删除之前输入的值

uni-app H5 input type="digit"时 ios连续点击小数点会删除之前输入的值

操作步骤：

预期结果：

  • 切换小数点或者多个小数点

实际结果：

  • 随意输入数字后双击或者多次点击小数点会自动删除之前的数字

bug描述：

  • input type="digit"时 ios连续点击小数点会删除之前输入的值，我在官网上的input示例中使用苹果手机测试也发现了此问题

更多关于uni-app H5 input type="digit"时 ios连续点击小数点会删除之前输入的值的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

感谢反馈，已复现该问题，已加分

更多关于uni-app H5 input type="digit"时 ios连续点击小数点会删除之前输入的值的实战教程也可以访问 https://www.itying.com/category-93-b0.html


请问修复了吗？

在 uni-app 的 H5 页面中，当使用 input 标签并设置 type="digit" 时，iOS 设备上连续点击小数点可能会导致之前输入的值被删除。这是因为 iOS 系统在处理 type="digit" 的输入框时，对连续输入小数点的行为有特定的处理逻辑。

解决方案

  1. 使用 type="text" 并通过正则表达式限制输入内容： 你可以将 type 设置为 text，然后通过 @input 事件和正则表达式来限制用户只能输入数字和小数点。

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

<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
  methods: {
    handleInput(event) {
      // 只允许输入数字和小数点
      this.inputValue = event.target.value.replace(/[^0-9.]/g, '');
    },
  },
};
</script>

  2. 使用 inputmode="decimal"： inputmode="decimal" 可以让移动设备弹出适合输入数字和小数点的键盘，同时不会出现 iOS 上连续点击小数点的问题。

    <template>
  <input
    type="text"
    inputmode="decimal"
    v-model="inputValue"
    placeholder="请输入数字"
  />
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
};
</script>

  3. 手动处理小数点输入： 你可以在 @input 事件中手动处理小数点的输入，确保用户只能输入一个小数点。

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

<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
  methods: {
    handleInput(event) {
      let value = event.target.value;
      // 确保只有一个小数点
      const decimalCount = (value.match(/\./g) || []).length;
      if (decimalCount > 1) {
        value = value.slice(0, -1);
      }
      this.inputValue = value;
    },
  },
};
</script>
回到顶部