jquery实现:多个输入框字数统计示例

一、实现效果:

在这里插入图片描述

二、代码实现:

每个输入框添加了相同的类名 inputField
并且每个输入框旁边的字数统计使用相同的类名 charCount。
然后使用 jQuery 的类选择器 $(‘.inputField’) 来选中所有具有该类名的输入框,并为它们绑定了 input 事件。
每当输入框的内容发生变化时,会触发绑定的回调函数,该函数会获取输入框中的文本长度,并更新相邻的字数统计元素的内容。

<!DOCTYPE html>
<html>
	<head>
		<title>多个输入框字数统计示例</title>
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	</head>
	<body>
		<input type="text" class="inputField" maxlength="20">
		<span class="charCount">0/20</span><br>
		
		<input type="text" class="inputField" maxlength="20">
		<span class="charCount">0/20</span><br>
		
		<input type="text" class="inputField" maxlength="20">
		<span class="charCount">0/20</span><br>
		
		<script>
			$(document).ready(function() {
				$('.inputField').on('input', function() {
					var inputLength = $(this).val().length;
					$(this).next('.charCount').text(inputLength + '/20');
				});
			});
		</script>

	</body>
</html>

完成~

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

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

相关文章

玻色量子“揭秘”之多项式回归问题与QUBO建模

摘要&#xff1a;多项式回归&#xff08;Polynomial Regression&#xff09;是一种回归分析方法&#xff0c;通过拟合一个多项式方程来模拟自变量与因变量之间的非线性关系。多项式回归的目标是找到一组多项式系数&#xff0c;使得拟合曲线尽可能地接近数据点。这种方法可以用于…

Python编写的爬虫为什么受欢迎?

每每回想起我当初学习python爬虫的经历&#xff0c;当初遇到的各种困难险阻至今都历历在目。即便当初道阻且长&#xff0c;穷且益坚&#xff0c;我也从来没有想过要放弃。今天我将以我个人经历&#xff0c;和大家聊一聊有关Python语音编写的爬虫的事情。谈一谈为什么最近几年py…

面试送分题!“商品分类浏览”如何测试?

电商项目无论是工作中&#xff0c;还是面试中&#xff0c;都是一个高频出现的词。 面试官非常热衷提问关于电商项目的问题。例如商品分类怎么测试&#xff1f;购物车怎么测试&#xff1f;订单怎么测试&#xff1f;优惠券怎么测试&#xff1f;支付怎么测试&#xff1f;等等。 …

每天学习一点点之 Tomcat 是如何清除过期 Session 的

今天使用一种很临时的方案解决 Session 泄漏的问题&#xff1a;缩短 Session 的过期时间。这种方法虽然简单&#xff0c;但却非常有效。然而&#xff0c;这引发了一个问题&#xff1a;我们应该将过期时间设置为多短呢&#xff1f;在 Spring Boot 中&#xff0c;最短的过期时间是…

修改Docker默认镜像和容器存储位置(超详细!!!)

Ubuntu20.04 修改Docker默认镜像和容器存储位置 Docker 默认安装的情况下&#xff0c;会使用 /var/lib/docker/ 目录作为存储目录&#xff0c;用以存放拉取的镜像和创建的容器等。不过由于此目录一般都位于系统盘&#xff0c;遇到系统盘比较小&#xff0c;而镜像和容器多了后就…

母婴团队半年破亿秘诀揭秘,合规经营成就辉煌

这支母婴产品销售团队在短短半年内实现了过亿的销售额&#xff0c;这是一个令人瞩目的成就。他们既不依赖线下门店&#xff0c;也不是传统的电商平台&#xff0c;那么他们是如何做到这一点的呢&#xff1f; 这个团队从16年10月开始经营母婴产品&#xff0c;如今已经过去了6年时…

【JavaEE】Spring小练习——存储和获取对象

一、题目&#xff1a; 在 Spring 项目中&#xff0c;通过 main 方法获取到 Controller 类&#xff0c;调用 Controller 里面通过注入的方式调用Service 类&#xff0c;Service 再通过注入的方式获取到 Repository 类&#xff0c;Repository 类里面有一个方法构建⼀个 User 对象…

unordered_map 与 unordered_set 的使用

unordered_map unordered_map 的介绍文档 unordered_map 的介绍文档&#xff1a;来自cpluscplus.com 的中文翻译 unordered_map是存储<key, value>键值对的关联式容器&#xff0c;其允许通过keys快速的索引到与 其对应的value。在unordered_map中&#xff0c;键值通常用…

国内企业出海首选的免费开源订单管理系统(OMS)解决方案

用开源智造Odoo订单管理系统 (OMS) 解决方案实现"订单到收款"流程自动化 开源智造Odoo 订单管理软件功能消除了手动操作瓶颈&#xff0c;可防止出错&#xff0c;还建立了从销售报价到订单履行的顺畅工作流来确保及时开票和付款&#xff0c;从而帮助您理顺订单处理过程…

大数据量条件SQL查询内存处理方案以及数据过滤算法优化

MySQL是一个广泛使用的关系型数据库管理系统。通过SQL语言进行数据操作和查询&#xff0c;还支持多用户、多线程和分布式操作等功能。 在实际使用中&#xff0c;我们会遇到各种查询条件&#xff0c;如字段名、表名、逻辑运算符、比较运算符、函数等。其中&#xff0c;有些查询…

【SpringCloud】从单体架构到微服务架构

今天来看看架构的演变过程 一、单体架构 从图中可以看到&#xff0c;所有服务耦合在一起&#xff0c;数据库存在单点&#xff0c;一旦其中一个服务出现问题时&#xff0c;整个工程都需要重新发布&#xff0c;从而导致整个业务不能提供响应 这种架构对于小项目而言是没有什么…

人人吐槽互联网行情不好?但这个岗位的需求猛增、疯狂招人!

在目前的大环境下&#xff0c;外部力量对国内国高科技领域的打压和封锁&#xff0c;国内的IT大厂纷纷进行了裁员&#xff0c;IT行业的龙头大厂裁员举措引发行业震动…… 可真的是这样吗&#xff1f;中国IT没前途了?在IT行业找不到工作了&#xff1f;非也非也&#xff0c;这只…

IoU计算方式

文章目录 一.IoU的简介及原理解析二.yolov系列中的IOU 一.IoU的简介及原理解析 IoU的全称为交并比&#xff08;Intersection over Union&#xff09;&#xff0c;通过这个名称我们大概可以猜到IoU的计算方法。IoU计算的是 “预测的边框”和“真实的边框”的交集和并集的比值。…

2023年“福建省工业互联网+智能制造创新大赛”开启报名

11月22日&#xff0c;由福建省总工会、福建省大数据集团有限公司共同举办的2023年“福建省工业互联网智能制造创新大赛”启动报名。 大赛积极响应《福建省总工会等八部门关于广泛深入开展劳动和技能竞赛为新发展阶段新福建建设建工立业的意见》&#xff08;闽工〔2022〕70号&am…

新手小白想做跨境电商,应该选第三方平台还是独立站?

近几年在疫情的影响下&#xff0c;电商特有的“免接触”模式迅速切中消费者的心理痛点&#xff0c;加上国内电商发展已经趋于平缓&#xff0c;很多线下店铺被迫关闭&#xff0c;这也使得越来越多的大卖和平台也不约而同布局跨境电商。而说到跨境电商&#xff0c;或许大家普遍想…

线程的认识

线程的引入 上一篇中,我们主要讲到了进程,多任务操作系统,希望系统能同时运行多个程序.如果是单任务的操作系统,完全不涉及进程,也不需要管理,更不需要调度.因此,本质上来说,进程是用来解决"并发编程"这样的问题的.但在一些特定的情况下,进程的表现,往往不尽如人意.比…

VTK物体表面画贴合线条

1、自由画线 2、曲线拟合画线 3、三点闭合曲线

软件流程设计之事件风暴EventStorming

最近新开了一个公众号&#xff0c;有兴趣可以关注一下。时不时就复活去更新一下。 最近在带几个新员工&#xff0c;新员工是学校刚毕业的&#xff0c;习惯于做一些导师或者师兄师姐们拆解好的任务&#xff0c;有很明确的功能描述&#xff0c;甚至喂饭喂到什么地步呢&#xff0…

跨境电商的微商业务:个人品牌的成功之路

随着互联网的发展&#xff0c;跨境电商行业迅猛崛起&#xff0c;微商业务作为其中的一种新型销售模式也逐渐崭露头角。微商业务以低成本、高灵活性的特点&#xff0c;为个人品牌的成功之路开辟了新的可能性。 本文将深入研究跨境电商微商业务&#xff0c;探讨在这个领域中个人…

竞赛YOLOv7 目标检测网络解读

文章目录 0 前言1 yolov7的整体结构2 关键点 - backbone关键点 - head3 训练4 使用效果5 最后 0 前言 世界变化太快&#xff0c;YOLOv6还没用熟YOLOv7就来了&#xff0c;如果有同学的毕设项目想用上最新的技术&#xff0c;不妨看看学长的这篇文章&#xff0c;学长带大家简单的…
最新文章