问一个网页文本框限制输入字数的问题

[hronro]

想实现一个限制用户输入 20 个字后就不能再输入的功能，现在遇到的问题是，在快到字数限制的时候（比如已经输入了 18 个字），我想要再输入字的时候，由于一般用的是拼音输入法，输入的拼音也会计入输入字数的，导致没办法继续输入。请问有什么好的解决方案吗？

[lincanbin]

达到字数限制时，设置一个定时器，如果***ms 后，字符长度依旧超出限制，进行截断并提示。

[hronro]

@lincanbin 这种体验恐怕不好吧，用户打的字突然就没了。
有没有办法判断用户到底是在打英文，还是在中文输入法里打拼音

[zhujinliang]

捕捉 keypress 事件，然后通过 preventDefault()阻止输入

我这是禁止输入除数字以外的字符，测试了一下，拼音可以打上，但选字后无法输入

[learnshare]

https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=mdn%20input%20maxlength

[zhujinliang]

@zhujinliang 测试了下不好使，输入法输入的居然阻止不了。。。我也不知道为什么。。。

[v1024]

maxlength 原生。

[hronro]

@learnshare
@v1024
用原生的 maxlength 貌似不符合我的需求，我这边想做是数字、字母和符号占一个字数，汉字占 2 个字数。
而且原生的 maxlength 貌似还有兼容性问题？

[FrankFang128]

汉字占两个是哪里的规矩 好奇怪

[learnshare]

@hronro 汉字也只占一个长度，前端都是 UTF8 编码的，怎么会两个呢

[hronro]

@learnshare 我知道 UTF-8 里面汉字也只占一个长度，但我要实现在计算字数的时候，一个汉字当两个长度算

[unknownservice]

输入法会阻断原生事件判定，中文环境的坑。兼容性最好的办法一楼已经给你了，不要直接删掉，给红圈提示让用户自己删。

[qgy18]

这个看看 twitter 、 sina 微博的体验就可以了。不要打断用户，让他输，给个提示不让提交就可以了。

[raincious]

UTF-8 不会出现这样的情况（占用字符长度不一致）。你需要检查一下你的代码了，看看网页的编码是不是真的是 UTF-8 。

另外就这个问题来说，其实最佳的方法是不要去阻止用户的输入（就是说不要用`preventDefault`），只给出提示，并且让用户不能提交表单。当用户发现提示的时候，会自己删除多余字符的。

一旦你使用了`preventDefault`，就意味着会丢弃用户输入的部分内容，对用户来说这是绝对不可接受的。（不改变用户输入的原则）

[hronro]

@raincious 是我想加一个功能，让汉字变成占 2 个长度

[hronro]

OK ，谢谢各位的答疑，看来阻止提交还是最佳的方案

[sneezry]

监听 compositionend 事件

[learnshare]

@hronro 你这样需要后端去判断，后端对于编码的解析比较好

[raincious]

@hronro

哦，不好意思，回帖的时候没有看到更新的回复。

如果一定要这样做的话，可以自行维护一张字码表，将“数字、字母、符号”放在里面单独计为 1 个，其他字符都计为 2 个，并且不要使用“阻止用户输入更多字符”的方式，转而“提示用户删除更多字符”。这样用户体验上是可行的。

不好的地方是，你不能直接得到字符串的长度，每次都需要扫描整个字符串来得到准确的长度。