uni-app nvue页面input组件maxlength属性不管用

uni-app nvue页面input组件maxlength属性不管用

示例代码：

<input class="seatch-input" placeholder="请输入设备ID号" maxlength="10" confirm-type="search" @confirm="searchHandle"/>

操作步骤：

  • nvue页面中添加input组件，配置上maxlength

预期结果：

  • 用户输入的时候超出最大字数不能再输入

实际结果：

  • 输入的长度不受限制

bug描述：

nvue页面使用input输入框 maxlength配置后不管用



| 项目信息            | 值          |
|---------------------|--------------|
| 产品分类            | uniapp/App   |
| PC开发环境操作系统  | Windows      |
| PC开发环境操作系统版本号 | win11        |
| HBuilderX类型       | 正式         |
| HBuilderX版本号     | 3.3.3        |
| 手机系统            | Android      |
| 手机系统版本号       | Android 10   |
| 手机厂商            | 小米         |
| 手机机型            | 小米青春版   |
| 页面类型            | nvue         |
| vue版本             | vue2         |
| 打包方式            | 云端         |
| 项目创建方式        | HBuilderX    |

更多关于uni-app nvue页面input组件maxlength属性不管用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

问题复现，这边排查下，已加分，感谢您的反馈！

更多关于uni-app nvue页面input组件maxlength属性不管用的实战教程也可以访问 https://www.itying.com/category-93-b0.html


bug已确认 下个版本修复

HBuilder X3.3.4+ 已修复，请升级

在 nvue 页面中，input 组件的 maxlength 属性确实存在兼容性问题，尤其是在 Android 平台。这是由于 nvue 底层渲染机制与 vue 页面不同导致的。

解决方案：

  1. 使用 @input 事件手动限制输入长度
    通过监听输入事件，在回调中截断超出部分：

    <input 
    class="seatch-input" 
    placeholder="请输入设备ID号" 
    :maxlength="10"
    confirm-type="search" 
    @confirm="searchHandle"
    @input="onInput"
    :value="inputValue"
/>

    export default {
    data() {
        return {
            inputValue: ''
        }
    },
    methods: {
        onInput(e) {
            if (e.value.length > 10) {
                this.inputValue = e.value.substring(0, 10);
            } else {
                this.inputValue = e.value;
            }
        },
        searchHandle() {
            // 搜索逻辑
        }
    }
}

  2. 使用 weex 原生的 input 组件属性（仅限 nvue）
    尝试添加 max-length 属性（注意是带短横线的写法）：

    <input max-length="10" />
回到顶部