解决手机微信小程序input组件maxlength截断输入拼音汉字

微信小程序 input 的 maxlength 在 iOS/部分安卓输入法组合阶段（拼音未上屏）会误计长度导致截断，核心解法：移除 maxlength 属性，改用 bindinput 事件配合 setTimeout 异步截取已上屏文本。

标准解决方案（原生小程序）

WXML：移除 maxlength 属性，绑定 bindinput 事件，注意使用 value 而非 model:value（小程序无双向绑定语法糖）。

JS：在回调中获取 e.detail.value，若超长则通过 setTimeout(..., 0) 异步更新数据，确保输入法组合结束后再截断，避免干扰选词过程。

<view class="container">
  <view class="title">自定义字数限制输入框</view>
  
  <!-- 注意：这里移除了原生的 maxlength 属性 -->
  <input 
    class="custom-input" 
    placeholder="请输入内容"
    value="{{inputText}}"
    bindinput="onInput"
  />
</view>

小程序js部分：

Page({
  data: {
    inputText: '',
    maxLength: 10
  },
  onInput(e) {
    const val = e.detail.value;
    if (val.length > this.data.maxLength) {
      // 异步执行，避开输入法组合状态
      setTimeout(() => {
        this.setData({
          inputText: val.slice(0, this.data.maxLength)
        });
      }, 0);
    } else {
      this.setData({ inputText: val });
    }
  }
})

标签：程序小程序js