jQuery-计算文本框字数

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

十度

HTML代码

复制格式化注释注释清空

放大

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

$(function(){
	var $tex = $(".tex");
	var $but = $(".but");
	var ie = jQuery.support.htmlSerialize;
	var str = 0;
	var abcnum = 0;
	var maxNum = 280;
	var texts= 0;
	var num = 0;
	var sets = null;
	
	$tex.val("");
	
	//顶部的提示文字
	$tex.focus(function(){
		if($tex.val()==""){
			$("p").html("您还可以输入的字数140");
		}	
	})
	$tex.blur(function(){
		if($tex.val() == ""){
			$("p").html("请在下面输入您的文字：");
		}	
	})
	
	//文本框字数计算和提示改变
	if(ie){
		$tex[0].oninput = changeNum;
	}else{
		$tex[0].onpropertychange = changeNum;
	}
	
	function changeNum(){
		//汉字的个数
		str = ($tex.val().replace(/\w/g,"")).length;
		//非汉字的个数
		abcnum = $tex.val().length-str;
		
		total = str*2+abcnum;
		
		if(str*2+abcnum<maxNum || str*2+abcnum == maxNum){
				$but.removeClass()
				$but.addClass("but");
				texts =Math.ceil((maxNum - (str*2+abcnum))/2);
				$("p").html("您还可以输入的字数"+texts+"").children().css({"color":"blue"});
		}else if(str*2+abcnum>maxNum){
				$but.removeClass("")
				$but.addClass("grey");
				texts =Math.ceil(((str*2+abcnum)-maxNum)/2);
				$("p").html("您输入的字数超过了"+texts+"").children("span").css({"color":"red"});
		}	
	}
	
	//按钮点击
	$but.click(function(){
		if($(this).is(".grey")){
			sets = setInterval(flash,100);
			$tex.addClass("textColor");
		}	
		
		function flash(){
			num++;
			console.log(num);
			if(num >= 5){
				num=0;
				clearInterval(sets);
			}else if(num%2 == 1){
				$tex.addClass("textColor")
			}else{
				$tex.removeClass("textColor")	
			}	
		}
	})	
})

运行代码

简介

请输入代码名称！

名称

jQuery-计算文本框字数

分类

综合代码

描述

1.用户边输入计算同时进行，告诉用户还剩余多少可输入的字数; 2.当超过规定的字数后，点击确定，会让输入框闪动