jquery 实时显示文本输入框字数

最新推荐文章于 2018-10-11 15:47:25 发布

最新推荐文章于 2018-10-11 15:47:25 发布 · 280 阅读

文章标签：

#jQuery #HTML #ViewUI

java script 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的字符计数插件，该插件能够实时显示文本输入框中字符数量，并在达到设定的最小值和最大值时提供相应的样式提示。通过实例代码演示了如何在网页上应用此插件，实现文本长度的限制与反馈。

(function($){
	$.fn.artTxtCount = function(tipWrap, minNumber, maxNumber){
		var countClass = 'info',
			fullClass = 'content_overstop';
			content = 'content_color';
		var count = function(){
			val = $(this).val().length;
			if(val <= maxNumber && val >= minNumber){
				tipWrap.html('<span class="' + countClass + '">Charater Count: <font class="' + content + '">' +  val + '</font></span>');
			}else{
				tipWrap.html('<span class="' + countClass + '">Charater Count: <font class="' + fullClass + '">' + val + '</font></span>');
			};
		};
		$(this).bind('keyup change', count);
		return this;
	};
})(jQuery);

页面需要引用jquery.min.js

$(document).ready(function(){

$('#message_content').artTxtCount($('#text_length'), 100, 2000); //参数说明，显示文本的控件，最少值，最多值。
});

页面代码

<div>
<textarea id="message_content" class="lenarea" style="height:150px;" rows="20" name="message[content]" cols="40"></textarea>
<div align="right" style="margin-right:0px;">
<span id="text_length"> </span>
</div>
</div>

不懂的可以留言，有更好的方式也可以交流