Jquery 仿新浪微博获取文本框能输入的字数

最新推荐文章于 2021-06-04 13:23:20 发布

江溪浣君

最新推荐文章于 2021-06-04 13:23:20 发布

阅读量1.3k

点赞数

分类专栏： JS 文章标签： jquery jQuery JQUERY Jquery JQuery 字数微博文本框限制

本文链接：https://blog.csdn.net/bluceyoung/article/details/8590505

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

limit.js代码

//txt:文本框jquery对象
//limit:限制的字数
//isbyte:true:视limit为字节数；false:视limit为字符数
//cb：回调函数，参数为可输入的字数
 function InitLimit(txt,limit,isbyte,cb){
	txt.keyup(function(){
		var str=txt.val();
		var charLen;
		var byteLen=0;
		if(isbyte){//原文博客：blog.csdn.net/bluceyoung
			for(var i=0;i<str.length;i++){
				if(str.charCodeAt(i)>255){
					byteLen+=2;
				}else{
					byteLen++;
				}
			}
			charLen = Math.floor((limit-byteLen)/2);
		}else{
			byteLen=str.length;
			charLen=limit-byteLen;
		}
		cb(charLen);
	});	
}

页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">  
  
<head>  
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript">  
</script>  
  
<script type="text/javascript" src="limit.js"></script>
<script type="text/javascript">  
$(document).ready(function(){  
  InitLimit($("#txt"),10,true,function(c){
  if(c>=0){
  	$("#show").val("还能输入"+c+"个字");
  	}else{
  		$("#show").val("已经超过"+(-c)+"个字");
  	}
  });    
  
InitLimit($("#txt1"),10,true,function(c){
  if(c>=0){
  	$("#show1").val("还能输入"+c+"个字");
  	}else{
  		$("#show1").val("已经超过"+(-c)+"个字");
  	}
  });       
});  
</script>  
</head>  
  
<body>  
<input type="text" id="txt"/><input id="show" type="text"/><br/>
<input type="text" id="txt1"/><input id="show1" type="text"/>

</body>  
</html>