关于输入框限制字数输入问题

在输入框输入内容,当需要限制字数的时候,如果是Input或者textarea,可以直接用maxlength进行字数的限制。如果是用div(添加了contenteditable属性),如果直接用input事件进行字数的限制,则会出现临界问题。
问题起源:需求:限制输入框只能输入200字。
初始解决方案:监听输入,判断当输入内容超过200字后,设置内容为前200。这样处理引发两个问题。
问题1:输入到末尾超过200字之后,光标会跳到最前面,从而导致前面描述的取前200字失败,解决此问题可以手动操作光标。
问题2:操作光标后,当输入198字左右的时候如果输入英文,200字能限制好,如果是键盘输入中文,在编辑还没确定时,文字会冲掉198字前面的内容。怎么解决这个问题,我们可以根据compositionstart和compositionend来解决。
先解释compositionstartcompositionend:当用户使用拼音输入法开始输入汉字时,compositionstart事件就会被触发。当文本段落的组成完成或取消时, compositionend 事件将被触发。
因此解决方法就是,给一个标识,在compositionstart时,将标志置为false,compositionend后将标识置为true,根据标识为true去执行刚才的文本替换操作。
代码如下:
在这里插入图片描述
这里contentbox就是输入框。
在这里插入图片描述contentLimit为限制字数。
switchCursorToEnd为操作游标到最后
在这里插入图片描述

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值