uni-app uni-easyinput type="digit" 在安卓基座上运行时只能输入一个小数点

uni-app uni-easyinput type=“digit” 在安卓基座上运行时只能输入一个小数点

示例代码：

<uni-forms-item label="服务器IP" name="ip" required>
<uni-easyinput type="digit" v-model="serverForm.ip" placeholder="请输入服务器IP" :inputBorder="false" />
</uni-forms-item>

操作步骤：

  • 正常输入并输入类似ip等包含多个小数点的文字

预期结果：

  • 正常可以输入多个小数点

实际结果：

  • 只能输入一个小数点

bug描述：

uni-ui
uni-easyinput type=“digit” 运行到安卓基座上时只能输入一个小数点（uni-ui通过npm安装，版本是1.4.28）
输入第二个小数点以后再输入数字，小数点会被替换掉

示例图片



| 项目信息       | 值           |
|----------------|--------------|
| 产品分类       | uniapp/App   |
| PC开发环境操作系统 | Windows      |
| PC开发环境操作系统版本号 | windows11    |
| 手机系统       | Android      |
| 手机系统版本号  | Android 14   |
| 手机厂商       | 华为         |
| 手机机型       | mate20 pro   |
| 页面类型       | vue          |
| vue版本        | vue3         |
| 打包方式       | 云端         |
| 项目创建方式    | CLI          |
| CLI版本号      | 5.0.8        |

更多关于uni-app uni-easyinput type="digit" 在安卓基座上运行时只能输入一个小数点的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

uni-easyinput的 digit 类型是数字输入框 数字只能有一个小数点 而你要用的是ip输入 有多个小数点 说明这个组件并不适用于你现在的需求 而不是组件的bug 你可以使用正则来修改你输入的值 实现ip输入的效果 或者 去插件市场搜索适用你需求的插件 <template>
<view >
<input v-model=“inputText” @input=“inputChange($event)” />
<uni-easyinput v-model=“easyinputText” @input=“easyinputChange” />
</view>
</template>

<script> export default { data() { return { inputText: '', easyinputText:'' } }, methods: { easyinputChange(e) { this.$nextTick(() => { this.easyinputText = e.replace(/[^\d.]/g, ''); }) }, inputChange(e) { this.$nextTick(() => { this.inputText = e.detail.value.replace(/[^\d.]/g, ''); }) }, } } </script>

更多关于uni-app uni-easyinput type="digit" 在安卓基座上运行时只能输入一个小数点的实战教程也可以访问 https://www.itying.com/category-93-b0.html


是这样啊，谢谢，因为在微信小程序上是可以输入多个小数点的。所以我以为在app上也可以

在 UniApp 中使用 uni-easyinput 组件时，如果你将 type 设置为 "digit"，并且在安卓设备上运行时只能输入一个小数点，这可能是由于 type="digit" 的限制导致的。

type="digit" 通常用于限制输入为数字和小数点，但在某些情况下，它的行为可能会因平台而异。为了确保你可以在安卓设备上输入多个小数点，你可以考虑以下几种解决方案：

1. 使用 type="number" 或 type="text"

将 type 设置为 "number" 或 "text"，然后通过正则表达式或其他方式手动验证输入内容。

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

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(value) {
      // 使用正则表达式过滤非数字和小数点
      this.inputValue = value.replace(/[^0-9.]/g, '');
    }
  }
};
</script>

2. 使用 input 事件手动处理输入

你可以在 input 事件中手动处理输入内容，确保只能输入数字和一个小数点。

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

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(value) {
      // 确保只能输入数字和一个小数点
      const newValue = value.replace(/[^0-9.]/g, '');
      const decimalCount = (newValue.match(/\./g) || []).length;
      if (decimalCount <= 1) {
        this.inputValue = newValue;
      } else {
        this.inputValue = this.inputValue; // 保持原值，不更新
      }
    }
  }
};
</script>

3. 使用 uni-number-box 组件

如果你需要更严格的控制输入内容，可以考虑使用 uni-number-box 组件，它可以更好地处理数字输入。

<template>
  <uni-number-box
    v-model="inputValue"
    :min="0"
    :step="0.1"
    :precision="2"
  />
</template>

<script>
export default {
  data() {
    return {
      inputValue: 0
    };
  }
};
</script>
回到顶部