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

news/2024/11/29 10:00:37/

在输入框输入内容,当需要限制字数的时候,如果是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为操作游标到最后
在这里插入图片描述


http://www.ppmy.cn/news/957366.html

相关文章

“深入解析Spring Boot:快速开发Java应用的利器“

标题:深入解析Spring Boot:快速开发Java应用的利器 摘要:Spring Boot是一个开发Java应用的利器,它简化了Spring应用的配置和部署过程,提供了快速构建和开发Java应用的能力。本文将深入解析Spring Boot的核心特性和优势…

Linux基础内容(26)—— 线程的互斥

Linux基础内容(25)—— 线程控制和线程结构_哈里沃克的博客-CSDN博客https://blog.csdn.net/m0_63488627/article/details/131372872?spm1001.2014.3001.5501 目录 1.线程互斥 1.问题引入 2.问题原因 3.安全问题 互斥 加锁 加锁后的特点 如何理…

从小白到大神之路之学习运维第62天--------Ansible自动化运维工具(playbook配置深入了解2.0)

第三阶段基础 时 间:2023年7月17日 参加人:全班人员 内 容: playbook配置深入了解2.0 目录 一、角色 实验案例:(安装Mariadb) 二、变量 (一)在playbook中使用自定义变量&#xff1…

新晋 Committer!来自复旦大学的帅哥一枚

点亮Star⭐️ 支持我们 https://github.com/apache/dolphinscheduler 最近,社区星力量又迎来一位新晋 Committer,这次是来自复旦大学研究生在读的王维饶同学,一起来认识一下吧! 个人简介 姓名:王维饶职位&#xff1a…

比chatPDF更优秀的国内平替

chatPDF是个非常不错的点子。基于openai的embeddeding接口。但是它有两个缺点。 1、当然是需要魔法才能访问。 2、它和微调不同。所有问题都是基于现有文档。而且每次都是根据你的提问,在文档转化成的向量数据里寻找相关联的内容,一同发给 chatGPT&…

使用 openai-java-sdk 整合 ChatGPT

推荐一套基于 SpringBoot 开发的全平台数据 (数据库管理工具) 功能比较完善,建议下载使用: github.com/EdurtIO/datacap 目前已经支持 40 多种数据源。国内首个应用 ChatGPT 到数据管理系统中项目。 github 地址:https://github.com/devlive-community/o…

五、DQL-1.概述

一、DQL介绍 Data Query Language 数据查询语言 用来查询数据库中表的记录。 查询关键字:SELECT 二、语法

从制造到智造,安捷利的云数蝶变

伴随着新一轮科技革命和产业变革的兴起,制造业的数字化转型步入深水区,尤其是在5G、工业互联网、大数据等为代表的新技术推动下,制造业全方位、全链条的升级已是大势所趋。 南沙地处中国的南大门,既是国家面向世界的重要战略平台…