uni-app input maxlength无效

uni-app input maxlength无效

示例代码:

<input class="uni-input" type="number" maxlength="5" placeholder="这是一个数字输入框" />  
<input class="uni-input" type="digit" maxlength="5" placeholder="这是一个带小数点输入框" />

操作步骤:

<input class="uni-input" type="number" maxlength="5" placeholder="这是一个数字输入框" />  
<input class="uni-input" type="digit" maxlength="5" placeholder="这是一个带小数点输入框" />

预期结果:

能正常输入小数点和限制长度

实际结果:

替换文件后能正常输入小数点,但是maxlength限制长度无效

bug描述:

https://ask.dcloud.net.cn/question/190763
按照这篇文章的临时解决方案后,小数点能输入了,但是长度限制有问题了

Image Image

信息 描述
产品分类 uniapp/H5
PC开发环境 Windows
PC开发环境版本 windows 10
HBuilderX类型 正式
HBuilderX版本 4.15
浏览器平台 Edge
浏览器版本 版本 124.0.2478.80 (正式版本) (64 位)
项目创建方式 HBuilderX

更多关于uni-app input maxlength无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

好的,我排查一下

更多关于uni-app input maxlength无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


还有个问题,设置type=‘number’,@change回调获取不到值

怎么样了,确定问题了吗,有没有临时的解决方案?

回复 2***@qq.com: 使用 alpha 4.17 吧,已修复

回复 1@qq.com: 回复 1@qq.com: input 没有 @change 事件,使用 @input

uni-app 中,<input> 组件的 maxlength 属性通常用于限制用户输入的最大字符数。如果你发现 maxlength 属性无效,可能是由于以下原因:

1. 检查 input 组件的使用方式

确保你在 <input> 组件中正确使用了 maxlength 属性。例如:

<input type="text" maxlength="10" />

2. 使用 uni-appinput 组件

uni-app 中,<input> 组件实际上是原生小程序的 input 组件,因此你需要确保你使用的是正确的组件。例如:

<uni-input type="text" maxlength="10" />

3. 检查 input 组件的类型

某些 input 类型可能不支持 maxlength 属性。例如,type="number"input 可能不支持 maxlength。你可以尝试使用 type="text"type="tel" 等类型。

4. 使用 uni-appinput 事件

如果你仍然无法限制输入长度,可以尝试使用 input 事件来手动限制输入长度。例如:

<template>
  <input type="text" :value="inputValue" @input="handleInput" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(event) {
      const value = event.detail.value;
      if (value.length > 10) {
        this.inputValue = value.slice(0, 10);
      } else {
        this.inputValue = value;
      }
    }
  }
};
</script>

5. 检查 uni-app 版本

确保你使用的是最新版本的 uni-app,因为旧版本可能存在一些 bug 或问题。

6. 平台差异

uni-app 支持多端开发,不同平台(如微信小程序、H5、App 等)可能会有不同的行为。确保你在目标平台上测试了 maxlength 的效果。

7. 使用 v-model 绑定

如果你使用 v-model 绑定 input 组件的值,确保你正确处理了输入长度的限制。例如:

<template>
  <input type="text" v-model="inputValue" maxlength="10" />
</template>

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