不得不看小技巧限制textarea文本域字符数与显示剩余字数

最新推荐文章于 2023-08-29 15:19:17 发布

凌云意

最新推荐文章于 2023-08-29 15:19:17 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/qq_42435220/article/details/80908457

版权

本文介绍了一种使用JavaScript实现在文本域输入时的字数限制功能的方法，并提供了具体的代码示例。文中还包含了如何控制图片大小及监控字数变化等实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不多说，直接上代码

<div class="copyEditorTitle copyCon">
    <textarea  id="editor_content"  placeholder="请输入内容" name="editor_content"> </textarea>
</div>


<div style="background: #fff;display: flex;padding:5px 10px 5px 0;">
   <span class="wi" style="float: right;text-align: right;color: #bababa;margin-left: 311px;" id="nu">150</div>

<div style="clear: both;"></div>

/*字数限制*/
	    $("#editor_content").on("input propertychange", function () {
	        var $this = $(this),
	                _val = $this.val(),
	                count = "";
	        if (_val.length > 150) {
	            $this.val(_val.substring(0, 150));
	        }
	        count = 150 - $this.val().length;
	    });
		
		$(function(){
			upLoadWidth()//控制图片的大小
			$(window).resize(function(){
				upLoadWidth()
			})
			myInputChange('.copyTi','.remainingNumbers','50','input')//实时监控input的字数变化
			
			myInputChange('.copyCon','#nu','150','textarea')//实时监控textarea的字数变化
			uploadImg()//控制内容区域字数的变化
		});

参考了https://blog.csdn.net/six365/article/details/78982900博客的字数限制，结合显示字符串功能，有问题的可以留言哦。