大文本限制录入文字后通过输入法鼠标单击还可继续超限额录入问题

 textInpEl.on('keyup propertychange', "textarea", function () {

                            var realMaxLength = $(this).parent().parent().find(".maxNum").text();

                            //真实的最大长度

                            var endFontLen = $(this).val().length;                            

                            if (endFontLen <= realMaxLength) {// $(this).parent().parent().parent().find(".iptNum").text(endFontLen);

                            } else {

                                // endFontLen = realMaxLength;

                                var showValue = $(this).val().substring(0, realMaxLength * 1)

                                $(this).val(showValue);

                                endFontLen = showValue.length;

                            }

                            $(this).parent().parent().parent().find(".iptNum").text(endFontLen);

                            //附上初始加载的字数

                        });

上述是我们对大文本框得录入事件监听,只要文本框录入就会触发,将录入得文字总长度与限制得字数比较超过得截取限额得长度赋值给大文本,但是,当用户用输入法编辑时,输入法上备用字段可能有1,2,3多种备选,用户通过鼠标点击序号文本会直接落入大文本,不会出发大文本框得录入监听事件,导致大文本框里得文字超过了限额。


优化方案:鼠标点击录入不会被监听到,但是文本框得内容发生了变化,我们可以通过监听大文本得内容变化事件,大文本框得内容变化时,超过限额,一样会比较然后截取满足限额得字数赋值在大文本框即可。代码如下:

textInpEl.on('input', "textarea", function () {

                            // 解决使用鼠标点击可以超出最大长度

                            var realMaxLength = $(this).parent().parent().find(".maxNum").text();

                            //真实的最大长度

                            var endFontLen = $(this).val().length;

                            if (endFontLen > realMaxLength) {

                                var showValue = $(this).val().substring(0, realMaxLength * 1)

                                $(this).val(showValue);

                                endFontLen = showValue.length;

                            }

                            $(this).parent().parent().parent().find(".iptNum").text(endFontLen);

                            //附上初始加载的字数

                        });

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/219692.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

OpenCV-python:图像像素类型转换与归一化

目录 1.图像像素类型转换 2. 图像像素转换适用情形 3.图像归一化 4.归一化方法支持 5.归一化函数 6.知识笔记 1.图像像素类型转换 图像像素类型转换是指将图像的像素值从一种类型转换为另一种类型。常见的像素类型包括无符号整数类型&#xff08;如8位无符号整数、16位无符…

面向注解编程—Spring 注解看这一篇就够了(2)

面向注解编程—Spring注解大全&#xff08;AOP篇&#xff09; AOP英文全称&#xff1a;Aspect Oriented Programming&#xff08;面向切面编程、面向方面编程&#xff09;&#xff0c;其实说白 了&#xff0c;面向切面编程就是面向特定方法编程。 AOP的作用&#xff1a;在程序…

2024年口碑比较好的猫罐头有哪些?2024年口碑比较好的猫罐头盘点

想必铲屎官都知道给猫咪长期吃主食罐头的好处了吧&#xff01;主食罐头不仅营养丰富&#xff0c;还能让猫咪顺便补充水分。有时候猫咪食欲不佳&#xff0c;一罐主食罐头就能让它们胃口大开呢。 猫罐头侠登场&#xff01;养猫这么久了我就把我吃的不错的猫罐头分享一下&#xf…

彼此的远方

那天两个人互相表白了心意&#xff0c;在那天那刻确定了彼此相爱&#xff0c;没有鲜花&#xff0c;没有礼物。 男孩的世界曾陷入黑暗&#xff0c;冷清而又孤寂&#xff0c;女孩带着光和热来了&#xff0c;后来&#xff0c;女孩成为了男孩的太阳。女孩以为男孩是远方的风…

--enable-preview JDK预览新功能运行打包

--enable-preview JDK预览功能运行打包 1. 这里以JDK19的预览功能虚拟线程为例2. 解决方案&#xff1a;在pom文件中加入build 1. 这里以JDK19的预览功能虚拟线程为例 以下这段代码是无法运行的。会报错 SpringBootApplication public class SpringBootOkhttpApplication {pub…

Helplook VS Google Docs:一对一比较

还记得Google Docs在2006年一炮走红的时候吗&#xff1f;它很大程度地改变了协作方式&#xff0c;也减少了附加文件和频繁保存的麻烦。相比Microsoft Word&#xff0c;很多人更喜欢Google Docs的简单性。 但是时代也在不断地发展。像HelpLook这样的新竞争对手也可以提供先进的…

划时代!Eclipse AI编码新方式——Copilot4Eclipse即将发布

在本月早些时候&#xff0c;MyEclipse官方宣布了将于本月晚些时候发布全新插件Copilot4Eclipse&#xff0c;它是同类型插件中的第一个&#xff0c;能帮助开发者直接在Eclipse IDE中无缝地使用GitHub Copilot AI编码辅助。 MyEclipse一次性提供了巨量的Eclipse插件库&#xff0c…

【openssl】RSA 生成公钥私钥 |通过私钥获取公钥

通过博客&#xff1a;Window系统如何编译openssl 编译出openssl.exe&#xff08;位于apps文件夹下&#xff09;。 现在需要使用它获得公钥私钥、通过私钥获取公钥 目录 说明&#xff01;&#xff01;&#xff01; 一.定位openssl.exe目录 二、进入命令cmd 三、生成私钥 …

ES6之Symbol

ES6中为我们新增了一个原始数据类型Symbol&#xff0c;让我为大家介绍一下吧&#xff01; Symbol它表示是独一无二的值 Symbol要如何创建 第一种创建方式&#xff1a; let sy Symbol()第二种创建方式&#xff1a; let sy Symbol.for()具体独一无二在哪呢&#xff1f;它们的地…

一句话搞定R语言画图|生存曲线、密度、山脊等130+图形任你选

大家好&#xff0c;今天我们分享一个神奇的网站&#xff0c;提供各种可视化图片的代码和详解&#xff0c;生信小博士公众号内回复冒号后面的关键词领取网站地址&#xff1a;神奇网站 1.一R代码添加显著性 1#1----set.seed(123)library(ggplot2)library(ggstatsplot)ggbetweens…

客户案例:SMC2威胁感知升级,保障金融行业邮件安全

客户背景 某基金公司是一家在业界享有广泛声誉的综合型资产管理公司&#xff0c;总部位于广州&#xff0c;在北京、上海、香港等地区均设有公司&#xff0c;业务范围遍布全球&#xff0c;凭借其卓越的投资业绩和专业的基金管理服务&#xff0c;赢得了广大投资者的高度认可。 该…

浪潮信息KeyarchOS的飞跃之路

1.背景 在正式向大家介绍KOS之前&#xff0c;我们先关注这样一些问题。 传统操作系统在大规模数据处理、高性能计算和人工智能应用方面面临着一些瓶颈问题&#xff0c;包括存储和访问效率、数据传输和通信效率、并行计算性能等等问题。为了能够更好的改进这些问题&#xff0c…

盘后股价狂飙16% — GitLab的DevOps产品在AI时代展现强劲财务业绩

12月4日&#xff08;周一&#xff09;在美股收盘后&#xff0c;GitLab的股价狂飙16%&#xff01;人工智能驱动的DevOps产品继续凸显其平台能力的优势。 GitLab 12 月 4 日股价图 GitLab报告第三季度收入同比增长32%&#xff01;根据粗略统计&#xff0c;全球已经有接近1万家企…

理解js中原型链的封装继承多态

前言 面向对象有三大特性:封装继承多态。 不过,js和java的封装继承多态是不一样的,我和从事java开发的朋友有过一次对话(抬杠 !--)。 我说:javascript也是面向对象语言, 他说:不对吧,js不是面向对象吧。 我说:是的,官方说的就是面向对象语言。 他说:那你知道三大特性吗?…

JSP 设置静态文件资源访问路径

这里 我们先在 WEB目录webapp 下创建一个包 叫 static 就用它来存静态资源 然后 我们扔一张图片进去 我们直接这样写 如下图 找到父级目录 然后寻找下面的 static 下的 img.png 运行代码 很明显 它没有找到 这边 我们直接找到 webapp目录下的 WEB-INF目录下的 web.xml 加入…

vue项目中添加刷新的按钮

刷新功能 点击导航的刷新按钮&#xff0c;刷新下方主体内容&#xff0c;我这边的项目分为左-上-下结构&#xff0c;上边为tabbar组件&#xff0c;下边为main组件&#xff0c;点击刷新整个流程是刷新按钮&#xff0c;去访问它父组件tabbar的兄弟组件main&#xff0c;使main组件…

MySQL EXPLAIN详解

MySQL数据库是许多Web应用程序的底层支持&#xff0c;而查询性能的优化是确保系统高效运行的关键。在MySQL中&#xff0c;EXPLAIN是一项强大的工具&#xff0c;可帮助开发者深入了解查询语句的执行计划&#xff0c;从而更好地优化查询性能。本文将详细解析MySQL的EXPLAIN关键字…

空间金字塔池化(SPP,Spatial Pyramid Pooling)系列

空间金字塔池化的作用是解决输入图片大小不一造成的缺陷&#xff0c;同时在目标识别中增加了精度。空间金字塔池化可以使得任意大小的特征图都能够转换成固定大小的特征向量&#xff0c;下面针对一些典型的空间金字塔进行盘点。 部分图片来自blog:空间金字塔池化改进 SPP / SP…

【Java技术专题】「入门到精通系列教程」深入探索Java特性中并发编程体系的原理和实战开发指南(内存模型技术专题)

深入探索Java特性中并发编程体系的原理和实战开发指南&#xff08; 线程进阶技术专题&#xff09; 前言介绍JVM内存模型运行时数据区域堆内存栈内存 内存访问规则原子性对象类型基本类型 可见性有序性&#xff08;Happen Before法则&#xff09;系统内存&#xff08;MESI协议&a…

群体遗传 — 核苷酸多样性π

群体遗传 — 核苷酸多样性π **核苷酸多样性&#xff08;nucleotide diversity&#xff09;&#xff0c;记为π&#xff0c;是分子遗传学中一个重要的概念&#xff0c;用于量化种群内部或不同种群间的遗传多样性。**这一概念由根井正利和李文雄在 1979 年提出。核苷酸多样性的…