uni-app 安卓消失的字符去哪里了？maxLength失效了！

前情提要

皮一下~这个标题我还蛮喜欢的嘿嘿嘿【附上一个自行思考的猥琐的笑容】

前段时间不是在开发uni-app的一个小应用嘛，然后今天测试发现，有一个地方在苹果是没有问题的，但是在安卓上出现了问题，附上安卓的截图

在这里我是有限制maxLength=50的，而且，赋值字符串到字符串长度在线校验d的平台进行校验的时候，这串字符的长度正好50，所以消失的字符去哪里了？是字符消失了，还是计数器有问题了？

安卓和苹果输入法的行为差异

输入法组合输入（IME）
在安卓设备上，尤其是使用中文输入法时，比如搜狗、百度、华为输入法等：

用户输入拼音，输入法会先显示候选词，这时并不会立即触发 input 或 keydown。
有些输入法会在“确认”后一次性插入多个字符，绕过浏览器对 maxlength 的判断。

粘贴行为不受限制
用户可以通过长按输入框 → 选择“粘贴” → 插入大量文字，完全绕过 maxlength 的限制。

某些 WebView 对 maxlength 支持不完整
特别是在微信小程序的 H5 页面、UniApp 编译到 App 时使用的 WebView 中：

并非所有 WebView 都严格遵守 HTML 标准；
maxlength 可能被忽略或部分支持。

不同平台实测表现对比（常见问题）

结论：为什么会失效？

通用的限制字数的组件

//inputLimitMixin.js
export default {
            
  props: {
            
    // 接收最大长度参数
    maxLength: {
            
      type: Number,
      default: 50 // 默认值为 50
    }
  },
  data() {
            
    return {
            
      inputValue: '' // 内部维护输入值
    };
  },
  methods: {
            
    handleInput(e) {
            
      let value = e.detail?.value || e.target?.value || ''; // 兼容 uni-app 和 web 环境

      if (value.length > this.maxLength) {
            
        this.inputValue = value.slice(0, this.maxLength);
        uni.showToast({
             title: `最多输入${
              this.maxLength}字`, icon: 'none' });
      } else {
            
        this.inputValue = value;
      }

      // 触发 v-model 更新
      this.$emit('input', this.inputValue);
    },
    handlePaste(e) {
            
      const pastedText = e.clipboardData?.getData('text') || '';
      if ((this.inputValue.length + pastedText.length) > this.maxLength) {
            
        e.preventDefault(); // 阻止粘贴
        uni.showToast({
             title: '粘贴内容过长', icon: 'none' });
      }
    }
  },
  computed: {
            
    charCount() {
            
      return this.inputValue.length;
    }
  }
};

在组件中使用这个 Mixin 并传入 maxLength

<template>
  <view class="remark-input">
    <textarea
      :value="inputValue"
      @input="handleInput"
      @paste="handlePaste"
      :placeholder="`请输入备注(最多${maxLength}字)`"
    />
    <div class="char-count">{
           { charCount }}/{
           { maxLength }}</div>
  </view>
</template>

<script>
import inputLimitMixin from '@/utils/inputLimitMixin';

export default {
              
  name: 'RemarkInput',
  mixins: [inputLimitMixin],
  props: {
              
    value: {
              
      type: String,
      default: ''
    }
  },
  model: {
              
    prop: 'value',
    event: 'input'
  }
};
</script>

外部调用时传入 maxLength

<template>
  <view>
    <RemarkInput v-model="tempRemark" :max-length="100" />
    <button @click="save">保存</button>
  </view>
</template>

<script>
import RemarkInput from '@/components/RemarkInput.vue';

export default {
              
  components: {
               RemarkInput },
  data() {
              
    return {
              
      tempRemark: ''
    };
  },
  methods: {
              
    save() {
              
      console.log('当前备注内容:', this.tempRemark);
    }
  }
};
</script>