jquery限制字符串输入简洁插件js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery限制字符串输入简洁插件js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery�����ַ�����������</title>
<style type="text/css">
#content{width:700px; height:100px; border:1px #CCCCCC dashed; padding:10px;}
#show{font-size:14px; font-weight:bold; height:40px; line-height:40px;}
#sid{ font-size:22px; font-weight:bold; color:#009900; font-style:italic;}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/manhuaInputLetter.1.0.js"></script>
<script type="text/javascript">
$(function (){
	$("#content").manhuaInputLetter({					       
		len : 50,//����������ַ�����				       
		showId : "sid"//��ʾʣ���ַ��ı���ǩ��ID
	});
});
</script>
</head>

<body>
<div style="margin:100px auto; width:800px;">
<textarea id="content"></textarea>
<p id="show">�����������룺<label id="sid"></label></p>
</div>
</body>
</html>

JS代码(manhuaInputLetter.1.0.js):

$(function(){
	$.fn.manhuaInputLetter = function(options){
	var defaults ={
	len:200,showId:"show"}
;
	var options = $.extend(defaults,options);
	var $input = $(this);
	var $show = $("#"+options.showId);
	$show.html(options.len);
	$input.live("keydown keyup blur",function(e){
	var content =$(this).val();
	var length = content.length;
	var result = options.len - length;
	if (result >= 0){
	$show.html(result);
}
else{
	$(this).val(content.substring(0,options.len))}
}
);
}
}
);

附件:下载该文件资源,减少时间成本(增值服务)