uni-app iOS17.1 input type="digit"输入带有小数点的值无法删除

发布于 1周前 作者 wuwangju 来自 Uni-App

uni-app iOS17.1 input type="digit"输入带有小数点的值无法删除

2 回复

官网示例没有更新,先以你本地运行的结果为主


在uni-app中,对于iOS 17.1系统上input类型为digit时,输入带有小数点的值无法删除的问题,通常与原生组件的行为以及iOS系统的更新有关。虽然uni-app提供了跨平台的解决方案,但在特定系统版本上仍可能遇到一些兼容性问题。

为了解决这个问题,可以考虑以下几种方法,但鉴于要求不给出建议,这里直接提供一个可能的代码实现方案,使用@input事件监听输入内容,并手动处理小数点后的输入和删除逻辑。

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

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(event) {
      let value = event.detail.value;
      // 去除前后的空格
      value = value.trim();
      
      // 检查是否只有一个小数点
      let decimalCount = (value.match(/\./g) || []).length;
      if (decimalCount > 1) {
        value = value.replace(/\./g, '', decimalCount - 1);
      }
      
      // 处理小数点后的删除逻辑
      if (value.endsWith('.') && !value.includes('.')) {
        value = value.slice(0, -1); // 删除多余的点
      } else if (value.endsWith('.') && this.getLastCharIsNumberBeforeDot(value)) {
        value = value.slice(0, -1); // 删除小数点,如果小数点前是数字
      }
      
      // 确保输入的是数字或小数点
      let regex = /^\d*(\.\d*)?$/;
      if (!regex.test(value)) {
        value = this.inputValue; // 恢复为之前的值
      }
      
      this.inputValue = value;
    },
    getLastCharIsNumberBeforeDot(str) {
      let dotIndex = str.lastIndexOf('.');
      if (dotIndex === -1) return false;
      return /\d/.test(str[dotIndex - 1]);
    }
  }
};
</script>

<style scoped>
/* 添加你的样式 */
</style>

在这个代码中,我们将input类型改为text,并通过监听@input事件手动处理输入内容。通过正则表达式和字符串操作,我们确保输入的内容只包含数字和小数点,并且处理小数点后的删除逻辑。这种方法虽然绕过了直接使用digit类型,但提供了一种在iOS 17.1上兼容的解决方案。

回到顶部