本文探讨了前端开发中限制文本输入字数的问题，特别是中文输入法导致的字数计算误差。文章分析了使用属性截断和全程JS监控的两种方案，提出了在用户使用输入法时隐藏拼音，仅在确认后显示文字的方法，以避免字数显示异常。同时，通过监听`keydown`事件中`keyCode`为229的情况来判断中文输入，并针对不同浏览器的特性进行适配。文章最后提到，对于Safari浏览器的解决方案仍在探索中。
背景
前端开发中往往有如下需求限制前端文本框(textfield,input,textarea,div)等的输入字数，可以参考新浪微博。但是这里有个问题，当我们使用中文输入法的时候，我们输入zheshishenm这段拼音会导致占用字数为11，当我们使用确认中文这是什么后其占用字数又变为4。假设我们需求当用户输入超过20个字的时候截断其输入，并实时的显示剩余字数，如图：
那我们该怎么实现呢？
方案一
在非DIV模拟的情况下，使用
maxlength属性来截断，使用JS来监听剩余字数
这个方案比较easy，当然不是我们本文所讨论的，而且也有诸多问题，首先只能对拥有maxlength属性的dom标签使用；其次IE9之前的版本不支持maxlength；最重要的问题还是使用输入法的时候，输入法会把你的输入缓存在输入法界面，这样你不停的输入JS所监听的length值是一直在增长的，直到你确认选择了某段文字，超过maxlength的部分会自动被截断，这时我们监听的剩余字数会出现从剩余N到0再到-N再到0的情况！如同微博的输入框，微博采用超出的形式来解决这个问题。本着对前端学习深究的态度，这不是我们想要的！
最低0.47元/天 解锁文章
1468
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
