Jquery实现：input、textarea输入框实时统计字数

最新推荐文章于 2022-09-27 09:13:44 发布

原创最新推荐文章于 2022-09-27 09:13:44 发布 · 978 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

前端-实战开发手册专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用JavaScript实时更新输入框字符数量的方法，通过监听输入事件，更新紧随输入框后的字符计数显示，适用于限制输入长度的场景。

实现效果
在这里插入图片描述
代码

	<div class="form-group">
	    <input type="text" class="form-control" placeholder="请输入文章标题" style="width: 1050px;" id="search_input">&nbsp;&nbsp;<span id="tishi" style="font-weight: bold;">0</span>/200
	</div>
	<script>
	    $('#search_input').on('input focus keyup',
	        function(){
	            var strs   = $(this).val();
	            remain = strs.length;
	            var content_msg = remain;
	            $(this).next().html(content_msg);
	            //.next() 方法返回被选元素的后一个同级元素。
	        }
	    );
	</script>