微信小程序input组件通过bindinput事件解决拼音阶段字符被算入maxlength长度限制问题

一、问题背景

在开发微信小程序时，我们经常会遇到需要对用户输入内容进行长度限制的场景。为了实现这一需求，微信小程序的input组件提供了maxlength属性，用于限制用户输入的最大字符数。但在中文输入场景中，其将拼音阶段的临时字符纳入长度计算‌，用户使用拼音输入法时，未转化为汉字的拼音字符串会被误判为有效输入，导致输入框过早触发截断。这一设计缺陷在部分安卓机上可通过调整输入法设置缓解问题，但iOS系统无此类设置，常造成输入流程被迫终止，严重影响交互体验‌。

二、bindinput事件的解决逻辑

通过弃用maxlength属性，改用bindinput事件，动态监听输入内容，在bindinput回调中实时获取输入值，从而达到对对文本长度的控制。

三、代码

WXML

<input value="{{inputText}}" bindinput="textInput" />
<!-- value 不能写成 model:value -->

js

Page({
    data:{
        inputText:''
    },

    textInput(e){
        let maxLength=10;    //设置input文本框最多能输入10个字符
        this.setData({title:e.detail.value.substr(0, maxLength)});
    }
})