maxlength在uni-app中无法完全限制显示字数，因其仅对text/textarea生效，number等类型忽略该属性，且不支持中英文差异计数与输入法兼容，需用@input+过滤逻辑或inputfilter实现可靠控制。
uni-app 里不能靠 maxlength 完全限制「显示字数」，尤其在 type="number" 或需要中英文区别计数时，必须配合 @input + 过滤逻辑。
为什么 maxlength 在 uni-app 里经常失效
它只对 <input type="text"> 和 <textarea></textarea> 生效；type="number"、type="digit" 等完全忽略该属性。微信/支付宝/APP 端行为不一致，H5 可能拦住键盘输入，但粘贴、中文输入法上屏前、长按选中后拖入文本都会绕过。更关键的是：maxlength 按 Unicode 码点计数，一个汉字、一个 emoji 都算 1 个长度，和产品要求的「中文算 2 字、英文算 1 字」不匹配。
@input 中手动截断是最可靠的做法
监听 @input（不是 @change 或 @blur），每次输入都做长度校验并主动修正 v-model 绑定的值。注意几个关键点：
- 必须用
String(value)转字符串再处理，避免null/undefined导致.replace报错 - 中文字符检测用
/[\u4e00-\u9fa5]/g，英文数字用/[a-zA-Z0-9]/g，组合后可区分计数 - 不要直接
value.substr(0, max)—— 中文输入法「正在组词」阶段会清空内容，得结合compositionstart/compositionend暂停过滤 - 示例（中英文混合计数，中文占 2 字）：
onInput(val) {
const str = String(val);
let len = 0;
for (let i = 0; i 100) {
let truncated = '';
for (let i = 0; i 100; i++) {
if (/[\u4e00-\u9fa5]/.test(str[i])) {
len -= 2;
if (len >= 100) truncated += str[i];
} else {
len -= 1;
if (len >= 100) truncated += str[i];
}
}
this.inputValue = truncated;
} else {
this.inputValue = str;
}
}
使用 inputFilter（仅限支持该 prop 的组件）
像 uview-plus 的 uv-input 或 TDesign 的 t-input 提供了 inputFilter 属性，比手动写 @input 更干净：
-
inputFilter是一个函数，接收原始输入值，返回处理后的值 - 它在底层自动处理 composition 事件，无需自己监听
compositionstart - 但注意：原生
<input>和<textarea></textarea>不支持该 prop，必须用封装好的 UI 组件 - 示例（限制总长度 50，中文算 2 字）：
inputFilter: (val) => {
const str = String(val);
let len = 0;
for (let c of str) len += /[\u4e00-\u9fa5]/.test(c) ? 2 : 1;
return len > 50 ? str.slice(0, 30) : str; // 粗略截断，实际建议用上面的逐字符累加逻辑
}
支付宝小程序 textarea 字数统计样式无法修改的坑
支付宝小程序的原生 <textarea showcount></textarea> 是系统渲染的，不走 Vue 模板，CSS 无法穿透。即使你用了 up-textarea，它的字数提示在支付宝端也是原生控件的一部分，placeholder-class、style、class 全部无效。唯一解法是：关掉 showCount，自己用 <view></view> 手动实现字数显示，并用 @input 实时更新。别指望通过覆盖类名或插槽修改——支付宝不给你这个入口。
真正难的不是写截断逻辑，而是判断什么时候该截、什么时候该等输入法上屏完成；不同平台对 composition 事件的支持程度不一，测试时务必覆盖微信、支付宝、H5、App 四端的真实软键盘输入场景。
