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

news2025/2/23 12:11:55

 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);

                            //附上初始加载的字数

                        });

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

两电脑共享鼠标键盘方案

一开始使用的是shareMouse 但是需要注册还有很多不稳定问题 后来想买个双拷线&#xff0c;又太贵&#xff0c;感觉不值的。 再后来&#xff0c;发现微软有自己的系统上的 共享方案 &#xff0c;叫做 Mouse without Borders ,而且是免费的&#xff0c;只能在window电脑上使用…

数据结构——希尔排序(详解)

呀哈喽&#xff0c;我是结衣 不知不觉&#xff0c;我们的数据结构之路已经来到了&#xff0c;排序这个新的领域&#xff0c;虽然你会说我们还学过冒泡排序。但是冒泡排序的性能不高&#xff0c;今天我们要学习的希尔排序可就比冒泡快的多了。 希尔排序 希尔排序的前身是插入排…

二叉树链式结构的实现——C语言

目录 一、提前说明 二、二叉树的遍历 2.1前序遍历 2.2中序遍历 2.3后序遍历 2.4代码 三、二叉树结点个数 3.1整体思路 3.2代码 四、二叉树叶子结点个数 4.1整体思路 4.2代码 五、二叉树的高度(深度) 5.1整体思路 5.2代码 六、二叉树第k层节点个数 6.1整…

天津python培训课程,普通人学python有用吗?

选择一个正确的行业对于个人的发展至关重要&#xff0c;在当今时代&#xff0c;IT行业高薪的特点吸引了越来越多的人转行“入坑”&#xff0c;而作为目前的热门编程语言&#xff0c;python也是很多人转行的选择。 Python培训学费选择 python培训班学费可能会因为培训机构所在…

利用document.write阻塞js文件加载

脚本加载失败如何重试【渡一教育】_哔哩哔哩_bilibili 注意需要添加3个转义符 利用document.write加载js的好处是会阻塞后续的js记载,必须等待当前js加载并执行完毕后,才会加载后续的js文件,保证了顺序性

计算机网络:可靠数据传输(rdt)、流水协议、窗口滑动协议

文章目录 前言一、Rdt1.Rdt1.02.Rdt2.03.Rdt2.14.Rdt2.25.Rdt3.0 二、流水线协议1.滑动窗口&#xff08;slide window&#xff09;协议发送窗口接收窗口正常情况下的2个窗口互动异常情况下GBN的2个窗口互动异常情况下SR的2窗口互动GBN协议和SR协议的异同 2.小结 总结 前言 Rdt…

Mac电脑如何安装git

一、简介 在Mac上安装Git之前&#xff0c;可以先使用git --version来查看一下是否安装了Git&#xff0c;因为Mac系统可能自带了Git&#xff0c;或者在你安装XCode&#xff08;或者XCode的命令行工具&#xff09;时&#xff0c;可能已经安装了 Git。 如果Mac还没有安装Git的话&…

做一个类似东郊到家的上门服务类系统有哪些功能?

上门服务系统是一款便捷的技师接单、上门提供理疗服务的软件。我们拥有优秀的开发团队&#xff0c;为您量身定制解决方案&#xff0c;价格合理&#xff0c;用心服务。 预约上门&#xff1a;该功能是预约上门推拿理疗按摩系统软件小程序APP的核心功能。消费者通过系统预约下单&a…

【带头学C++】----- 九、类和对象 ---- 9.5 初始化列表

目录 9.5 初始化列表 9.5.1 对象成员 代码&#xff1a; 9.5.2 初始化列表 9.5 初始化列表 9.5.1 对象成员 在类中定义的数据成员一般都是基本的数据类型。但是类中的成员也可以是对象&#xff0c;叫做对象成员。 先调用对象成员的构造函数&#xff0c;再调用本身的构造函数…

C# .NET平台提取PDF表格数据,并转换为txt、CSV和Excel表格文件

处理PDF文件中的内容是比较麻烦的事情&#xff0c;特别是以表格形式呈现的各种数据。为了充分利用这些宝贵的数据资源&#xff0c;我们可以通过程序提取PDF文件中的表格&#xff0c;并将其保存为更易于处理和分析的格式&#xff0c;如txt、csv、xlsx&#xff0c;从而更方便地对…

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

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

银行测试:什么是银行数据治理?如何进行有效的银行领域的实际应用?

在数字化时代&#xff0c;数据已经成为银行的重要资产&#xff0c;而数据治理则是确保数据质量、安全性和可用性的关键。那么&#xff0c;什么是银行数据治理&#xff1f;为什么我们需要银行数据治理&#xff1f;又如何进行有效的银行数据治理呢&#xff1f;又有哪些数据治理技…

万界星空科技智能工厂主要建设模式

由于各个行业生产流程不同&#xff0c;加上各个行业智能化情况不同&#xff0c;智能工厂有以下几个不同的建设模式。 第一种模式&#xff1a;是从生产过程数字化到智能工厂 在石化、钢铁、冶金、建材、纺织、造纸、医药、食品等流程制造领域&#xff0c;企业发展智能制造的内在…

SIT75176B:3.0~5.5V 供电,32 节点,10Mbps 半双工 RS485/RS422 收发器

SIT75176B 是一款 3.0V~5.5V 电源供电、总线端口 ESD 保护能力 HBM 达到 15kV 以上、总 线耐压范围达到 15V 、半双工、低功耗&#xff0c;功能完全满足 TIA/EIA-485 标准要求的 RS-485 收发器&#xff0c; 最多允许 32 个节点同时连接到总线。 SIT75176B 包…

2023年个人工作总结怎么写?工作任务完成自动记录的待办软件

2023年已经接近尾声&#xff0c;不少人已经开始期待新的一年到来了。不过对于大多数职场人士来说&#xff0c;最近还有一项让人头疼的任务需要完成&#xff0c;这就是撰写2023年个人工作总结。 那么年度个人工作总结怎么写呢&#xff1f;其实很简单&#xff0c;年度工作总结一…

Linux 基础知识整理(三)

Linux文件和目录 Linux系统是一种典型的多用户系统&#xff0c;不同的用户有不一样的地位和权限。为了保护系统的安全性&#xff0c;Linux系统对不同的用户访问同一文件&#xff08;包括目录文件&#xff09;的权限做了不同的规定。 root权限最高&#xff0c;可以通过ls -l 或…

Temu数据软件:如何使用Temu数据软件优化您的Temu店铺运营

在如今竞争激烈的电商市场中&#xff0c;了解市场趋势、优化产品和店铺运营、了解竞争对手等方面的数据分析变得至关重要。为了帮助Temu平台上的商家更好地了解市场和消费者需求&#xff0c;提高运营效果&#xff0c;Temu数据软件成为了一项强大的工具。本文将介绍一些建议的Te…

连接池打满,导致页面夯住

连接池打满&#xff0c;导致页面夯住 1、背景生产环境中访问系统&#xff0c;页面延迟卡顿 2、排产思路 1&#xff09;、查看日志是排查问题的第一要素&#xff08;个人认为&#xff09;&#xff1b;查看日志发现使用com.alibaba.druid.pool设置最大连接数为100&#xff0c;已…

2024年天津财经大学珠江学院专升本专业课考试《经济学》考试大纲

天津财经大学珠江学院2024年高职升本科专业课考试《经济学》考试大纲 一、本大纲系天津财经大学珠江学院2024年高职升本科《经济学》课程考试大纲。所列考试范围出自郑健壮、王培才主编的教材《经济学基础&#xff08;第二版&#xff09;》&#xff0c;清华大学出版社&#xf…

独立开发者都使用了哪些技术栈?

目录 一、前言 架构展示&#xff1a; 技术栈展示&#xff1a; 二、JNPF-JAVA-Cloud微服务 1.后端技术栈 2. 前端技术栈 Vue3技术栈 3. 数据库支持 一、前言 像独立开发者这类人群&#xff0c;也可以把他们理解为个人开发者/自由职业者。有一组数据显示&#xff0c;在美国&#…