输入框限制长度、中文输入法与表单提交怎么处理?
先理解原理和示例,再练习完整口述与追问。
回答要点
原生约束与业务校验;composition;字符计数口径;粘贴和程序写入;服务端校验。
原理拆解
maxlength 等原生能力能提供基础约束,但“字符”可能指 UTF-16 code unit、Unicode 码点、用户可见字形或字节,必须先约定口径。emoji 和组合字符可能占多个单位。中文输入法有 compositionstart/end 等阶段,正在组合时强制截断或提交搜索可能破坏输入,需按组件和浏览器事件协议处理。
示例与推演
搜索框在组合输入期间只更新草稿,不发查询;组合结束后基于最终值进入防抖。提交时重新校验长度、必填和格式,粘贴、拖入、自动填充同样覆盖。若业务按可见字形计数,可评估 Intl.Segmenter 并提供目标环境兼容策略,而不是直接 split('')。
易错点
仅拦 keydown 无法覆盖粘贴和程序写值,也不能替代后端校验。截取字符串可能切断代理对或组合序列。
参考回答可直接练习口述
我先约定长度单位,结合原生约束、输入法阶段与最终提交校验。组合输入不提前打断,所有输入路径都覆盖,服务端仍验证真实业务限制。