textarea文本框实现字数监控--propertychange input

最新推荐文章于 2025-03-10 16:10:06 发布

原创最新推荐文章于 2025-03-10 16:10:06 发布 · 3.5k 阅读

3 ·

CC 4.0 BY-SA版权

jsp 单个小知识同时被 2 个专栏收录

20 篇文章

订阅专栏

jquery

3 篇文章

订阅专栏

本文介绍如何使用JavaScript结合textarea元素的propertychange和input事件，实现实时监测并限制文本框输入字数的功能，确保用户输入不超过预设限制。

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

1、页面文本框：

<textarea rows="3" cols="20" name="packagingDesc" id="packagingDesc" 
	style="border: 1px solid #dbdbdb;width: 520px;vertical-align: text-top;">${logInfo.packagingDesc }</textarea>
<p class="qi">剩余：<span id="text-count" style="color: #F60;">512</span>字符,建议填写包装形式、尺寸，各类集装箱能装载的产品件数等信息，便于买家了解。</p>

2、判断是否有汉字和特殊符号：

// 常规包装
		$("#text-count").text(512-$("#packagingDesc").val().trim().length);
		
		$("#packagingDesc").blur(function(){
			var packagingDesc = $(this).val().trim();
			if(packagingDesc != ""){


				var str = validateFun(packagingDesc);
				if(str != ""){
					$("#packagingDesc_info").show();
					$("#packagingDesc_error").text(str);
				}else{
					$("#packagingDesc_info").hide();
					$("#packagingDesc").css("border-color","#dcdcdc");
				}
			}else{
				$("#packagingDesc_info").hide();
			}
		});

function validateFun(key){
		var pattern_chin = /[\u4e00-\u9fa5]/g; //汉字的正则表达式
		var patter_special_char = /[﹤﹥；，《》ØαβγδεπνξρσηθλτφψωΔΣ：。、￥（）——【】：‘’“”？¤§゜¨·×÷ˇˉˊˋ˙ΓΔΘΞ∏∑ΥΦΨ℅№℡′〃※ъыюя―‖¨′〃￡￥¤￠]+/;
		var str = "";
		var matchResult = key.match(pattern_chin);
		var matchResultSpecial = key.match(patter_special_char);
		if(matchResult != null && matchResultSpecial != null){
			str = "请不要输入如下非英文字符："+matchResult.join("")+matchResultSpecial.join("");
		}else if(matchResult != null && matchResultSpecial == null){
			str = "请不要输入如下非英文字符："+matchResult.join("");
		}else if(matchResult == null && matchResultSpecial != null){
			str = "请不要输入如下非英文字符："+matchResultSpecial.join("");
		}
		return str;
	}

3、字数限制的监控方法：

/*字数限制*/
	    $("#packagingDesc").on("propertychange input", function() {
	        var $this = $(this),
	            _val = $this.val(),
	            count = "";
	        if (_val.length > 512) {
	            $this.val(_val.substring(0, 512));
	        }
	        count = 512 - $this.val().length;
	        $("#text-count").text(count);
	    });

4、如果要求换行占两个字符：

/*字数限制*/
	    $("#packagingDesc").on("propertychange input", function() {
	        var $this = $(this),
	         _val = $this.val(),
	    	r=_val.match(/\s/gi),
	    	haveInput = _val.length;
	    	if(r!=null){
	    		haveInput = haveInput + r.length;
	    	}
	    	
	        if (haveInput > 512) {
	            $this.val(_val.substring(0, 512));
	        }
	        $("#text-count").text(512 - haveInput);
	    });