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

在输入框输入内容,当需要限制字数的时候,如果是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.rhkb.cn/news/11311.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

thinkphp 模板截取中文(限制显示字数)

把如下代码粘贴到thinkphp核心包的/common/functions.php 的最后便可在html模型里直接使用 //函数解释: //msubstr($str, $start0, $length, $charset”utf-8″, $suffixtrue) //$str:要截取的字符串 // $start0:开始位置,默认从0开始 // $l…

人工智能能有多聪明,取决于这两个字

当代打工人,已经感受到人工智能带来的“寒气”。 今年以来,GPT-4 被陆续报道高分通过法律、医学、会计等领域的考试 [1]。不仅如此,GPT-4 还通过谷歌工程师面试拿到了年薪 18 万美元的 offer [2],这让不少打工人开始担心被 AI 抢饭…

30岁+,帝都大厂夫妻+两娃的百万存款和家庭开销。。

周末闲来无事,心血来潮算了下家庭年开销。不算不知道,这一算花销还真是不小,好在我和老公都还能挣到钱。 先说明下家庭成员和职责分工: 老公:985本硕连读,工作10多年,待过了三家互联网大厂&…

面试题:Redis脑裂为何会导致数据丢失?

更多内容关注微信公众号:fullstack888 1 案例 主从集群有1个主库、5个从库和3个哨兵实例,突然发现客户端发送的一些数据丢了,直接影响业务层数据可靠性。 最终排查发现是主从集群中的脑裂问题导致:主从集群中,同时有两…

AI热潮中的黑马:曾经的显卡制造商是如何跻身AI巨头之列的?

导读:在芯片行业的风云变幻中,英伟达如何从一家显卡制造商翻身成为AI巨头?面对行业迭代速度极快、激烈竞争和显著的高成本特点,英伟达是如何构建属于自己的护城河,又是如何突破技术瓶颈,跑在前列的呢?他们是如何将"摩尔定律"推进到更高阶段创造出属于自…

低质量软件的最大“祸根”:虚构问题!

【编者按】软件质量的好坏与很多因素有关,例如开发者的投入水平,采取测试手段的标准,都有可能成为低质量的诱因。 原文链接:https://cerebralab.com/Imaginary_Problems_Are_the_Root_of_Bad_Software 未经允许,禁止转…

解决国产系统 Docker 拉取大镜像卡顿之谜

今天解决了客户 arm64 机器上 docker pull 大镜像卡住的问题。 由来 同事让我帮忙解决客户现场 Docker 镜像无法拉取的问题,故障如下会一直卡住: $ docker pull xxx:5000/xxxx xxx: Pulling from xxx/xxxxxx 7c0b344a74c2: Extracting [> …

中国版ChatGPT“狂飙”的机会在哪儿?

能否为百度止颓,不仅取决于技术能力,更取决于公司的经营策略和市场环境。目前,百度在人工智能领域已经取得了一些成果,比如语音识别、图像识别等方面,但在对话系统领域仍有待提高。如果百度能够利用自身的优势&#xf…

GPT-3.5还没研究明白,GPT-4又来了,chatGPT会进化成什么样?

基于GPT-3.5的chatGPT热度才稍稍减退没多久,GPT-4又来了,文新一言的发布会也槽点满满,差距似乎越来越大了。 chatGPT到底厉害在哪?为什么突然就爆火了呢? 它的爆火,一方面,和它的出现形态有关…

.IMA格式CT数据转成普通的.png或.jpg

在找医学图像去噪数据集的时候,发现2016 0mayo clinic 的数据格式是.IMA,我现在像把这些.IMA格式的数据都转成为常见的.png格式或者.jpg格式的图。方法如下: 因为这些数据都是以病例形式存在的,如下图,L067、L096...、…

PHPExcel导出网络图片(如果是微信图片需将微信图片转成正常的图片地址)

数据库的格式: 后台: 需求:将用户导到excel表中 //将用户导出到excel表中,并保存用户头像public function export(){$exportId json_decode(Request::param(exportId),true);//需要导出数据的id$exportS Db::name(member);//…

如何将微信电脑图片dat格式文件转换为jpg格式

电脑微信聊天过程中的图片文件格式为dat格式的文件,我们无法用普通的图片查看软件进行查看,那么如何将dat格式文件转换为jpg图片格式呢? 有办法,使用转换软件转换一下即可 首先点这里下载软件: 微信电脑版DAT图片格式…

微信DAT文件转JPG图片(图片恢复)

微信电脑版现在已经是日常工作生活必不可少的工具,有时候删除了聊天记录或者被系统清理软件清理了,但还想查看曾经的微信聊天图片。 这个时候辛辛苦苦找到了文件,却发现无法查看,因为微信电脑版为了保护我们的隐私,把…

微信电脑版聊天图片DAT格式转为普通JPG图片

微信是我们现在最常用的社交软件之一,它的功能越来越强大,我们的手机运行越来越慢。我们手机的运行内存越来越大的原因就是软件的功能越来越多,我们在使用这些功能的时候就会产生越来越多的无用垃圾,处理这种问题只有3种方法。 1.…

年度AI对话|达观陈运文:做私有部署的大模型,数据安全更具优势

本文内容来源于达观数据董事长兼CEO陈运文受邀出席36氪数字时氪的《年度AI对话》专栏采访内容 大模型既带来了压力,也带来了机会 文 | 杨俊 编辑 | 石亚琼 封面来源|企业官方 掌握了人工智能就掌握了新时代的生产力密码。在ChatGPT爆火的当下&#xff…

私有化运行大型语言模型 - 私有化的 GPT

目录 概述 Understanding the Privacy Challenge​了解隐私挑战 Potential Solutions to the Privacy Challenge​隐私挑战的潜在解决方案 Federated Learning​ 联邦学习 Homomorphic Encryption​ 同态加密

零基础,零成本,部署一个属于你的大模型

前言 看了那么多chatGPT的文章,作为一名不精通算法的开发,也对大模型心痒痒。但想要部署自己的大模型,且不说没有算法相关的经验了,光是大模型占用的算力资源,手头的个人电脑其实也很难独立部署。就算使用算法压缩后的…

Metabase可视化BI系统部署安装及简单使用

metabase 是国外开源的一个可视化系统,语言使用了Clojure TypeScript。 Clojure(/ˈkloʊʒər/)是Lisp程式語言在Java平台上的現代、動態及函數式方言。来自维基百科。 我也是第一次看到这个语言,知道它是可以运行在Java环境上的…

常用ChatGPT类模型的总结

做一个现在常用ChatGPT类模型的总结,后续会持续更新,大家如果有新的可以在评论里说 一、商用的(不开源)的: ChatGPT: https://chat.openai.com/ Claude: 可以参考我的这篇文章,北方的郎:Ant…

最新类ChatPDF及AutoGPT开源18大功能平台——闻达手把手超详细环境部署与安装——如何在低显存单显卡上面安装私有ChatGPT GPT-4大语言模型LLM调用平台

目录 前言闻达框架简介前期准备电脑要求安装anaconda安装相应版本的CUDA配置ChatGLM-6B Conda环境安装pytorch 类ChatPDF及AutoGPT开源模型——闻达环境部署及安装相关代码及模型下载解压模型到指定地址配置文件修改根据使用的不同模型,安装相关库运行体验运行chatG…