uni-app 升级HBuilderX后 input 组件 maxlength 属性不起作用且无法触发@input 事件

uni-app 升级HBuilderX后 input 组件 maxlength 属性不起作用且无法触发@input 事件

示例代码：

<input  
    v-model="smsCode"  
    type="number"  
    placeholder="请输入6位验证码"  
    maxlength="6"  
    [@input](/user/input)="bindLogin"  
    style="font-weight: bold; height: 64rpx; border-bottom-width: 2rpx;border-bottom-color: #CACACA;"  
/>

操作步骤：

。。。

预期结果：

。。。

实际结果：

。。。
项目信息 描述
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 11
HBuilderX类型 正式
HBuilderX版本 3.3.3
手机系统 Android
手机系统版本 Android 11
手机厂商 小米
手机机型 小米10 pro
页面类型 nvue
Vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app 升级HBuilderX后 input 组件 maxlength 属性不起作用且无法触发@input 事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

maxlength 属性不起作用，已确认bug 查看相关帖子：https://ask.dcloud.net.cn/question/137031
无法触发@input 事件，未复现此问题
感谢您的反馈！

更多关于uni-app 升级HBuilderX后 input 组件 maxlength 属性不起作用且无法触发@input 事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢回复， @input 事件 可以正常触发，是我自己搞错了

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

升级 HBuilderX 后，input 组件的 maxlength 属性失效且 @input 事件不触发，通常与新版对 nvue 页面中 input 组件的底层渲染引擎调整有关。以下是针对此问题的排查与解决方案：

1. 检查 type 属性

type="number" 在部分平台（尤其是 nvue 的 Android 端）可能不兼容 maxlength 属性。建议：

  • 移除 type="number"，改用 type="text" 并添加 input 事件处理来限制数字输入。
  • 示例调整：
    <input  
    v-model="smsCode"  
    type="text"  
    placeholder="请输入6位验证码"  
    maxlength="6"  
    @input="handleInput"  
    style="font-weight: bold; height: 64rpx; border-bottom-width: 2rpx;border-bottom-color: #CACACA;"  
/>

    methods: {
    handleInput(e) {
        // 限制输入为数字，并截断长度
        this.smsCode = e.detail.value.replace(/\D/g, '').slice(0, 6);
        this.bindLogin(); // 手动触发原逻辑
    }
}
回到顶部