V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
hronro
V2EX  ›  JavaScript

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

  •  
  •   hronro · 2015-10-19 15:33:14 +08:00 · 4357 次点击
    这是一个创建于 3342 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    第 1 条附言  ·  2015-10-19 17:46:46 +08:00
    我这边要实现数字、字母、符号只占一个字数,汉字占 2 个字数,所以原生的 maxlength 应该用不了
    18 条回复    2015-10-20 14:50:47 +08:00
    lincanbin
        1
    lincanbin  
       2015-10-19 15:42:24 +08:00
    达到字数限制时,设置一个定时器,如果***ms 后,字符长度依旧超出限制,进行截断并提示。
    hronro
        2
    hronro  
    OP
       2015-10-19 16:57:44 +08:00
    @lincanbin 这种体验恐怕不好吧,用户打的字突然就没了。
    有没有办法判断用户到底是在打英文,还是在中文输入法里打拼音
    zhujinliang
        3
    zhujinliang  
       2015-10-19 17:14:30 +08:00
    捕捉 keypress 事件,然后通过 preventDefault()阻止输入

    我这是禁止输入除数字以外的字符,测试了一下,拼音可以打上,但选字后无法输入
    zhujinliang
        5
    zhujinliang  
       2015-10-19 17:25:07 +08:00
    @zhujinliang 测试了下不好使,输入法输入的居然阻止不了。。。我也不知道为什么。。。
    v1024
        6
    v1024  
       2015-10-19 17:39:25 +08:00
    maxlength 原生。
    hronro
        7
    hronro  
    OP
       2015-10-19 17:45:32 +08:00
    @learnshare
    @v1024
    用原生的 maxlength 貌似不符合我的需求,我这边想做是数字、字母和符号占一个字数,汉字占 2 个字数。
    而且原生的 maxlength 貌似还有兼容性问题?
    FrankFang128
        8
    FrankFang128  
       2015-10-19 17:48:24 +08:00 via Android
    汉字占两个是哪里的规矩 好奇怪
    learnshare
        9
    learnshare  
       2015-10-19 18:11:04 +08:00
    @hronro 汉字也只占一个长度,前端都是 UTF8 编码的,怎么会两个呢
    hronro
        10
    hronro  
    OP
       2015-10-19 18:18:03 +08:00
    @learnshare 我知道 UTF-8 里面汉字也只占一个长度,但我要实现在计算字数的时候,一个汉字当两个长度算
    unknownservice
        11
    unknownservice  
       2015-10-19 19:00:17 +08:00
    输入法会阻断原生事件判定,中文环境的坑。兼容性最好的办法一楼已经给你了,不要直接删掉,给红圈提示让用户自己删。
    qgy18
        12
    qgy18  
       2015-10-19 19:13:06 +08:00 via iPhone   ❤️ 1
    这个看看 twitter 、 sina 微博的体验就可以了。不要打断用户,让他输,给个提示不让提交就可以了。
    raincious
        13
    raincious  
       2015-10-19 19:22:02 +08:00
    UTF-8 不会出现这样的情况(占用字符长度不一致)。你需要检查一下你的代码了,看看网页的编码是不是真的是 UTF-8 。

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

    一旦你使用了`preventDefault`,就意味着会丢弃用户输入的部分内容,对用户来说这是绝对不可接受的。(不改变用户输入的原则)
    hronro
        14
    hronro  
    OP
       2015-10-19 19:42:15 +08:00
    @raincious 是我想加一个功能,让汉字变成占 2 个长度
    hronro
        15
    hronro  
    OP
       2015-10-19 19:43:42 +08:00
    OK ,谢谢各位的答疑,看来阻止提交还是最佳的方案
    sneezry
        16
    sneezry  
       2015-10-19 19:57:28 +08:00
    监听 compositionend 事件
    learnshare
        17
    learnshare  
       2015-10-19 19:57:44 +08:00
    @hronro 你这样需要后端去判断,后端对于编码的解析比较好
    raincious
        18
    raincious  
       2015-10-20 14:50:47 +08:00
    @hronro

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

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

    不好的地方是,你不能直接得到字符串的长度,每次都需要扫描整个字符串来得到准确的长度。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   879 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 20:37 · PVG 04:37 · LAX 12:37 · JFK 15:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.