Javascript特效之控制输入字数和进度条显示

Javascript特效之控制输入字数和进度条显示

我们经常会遇到一些网页的输入框会限制输入的字数，并且会显示出当前输入了多少个字符，今天来看看怎么实现。

效果图：

可以看到，我们每输入一个字符下面的进度条会跟着变。

实现思路：

首先设置好总字数，再为文本框注册键盘按下事件。没按下按键或者删除字符都要进行处理，如果超过总字符数则截取掉。

颜色则是通过rgb来控制越来越红。

js代码：

function textCounter(field,counter,maxlimit,linecounter) {
	// text width//
	var fieldWidth =  parseInt(field.offsetWidth);
	var charcnt = field.value.length;        

	// trim the extra text
	if (charcnt > maxlimit) { 
		field.value = field.value.substring(0, maxlimit);
	}

	else { 
	// progress bar percentage
	var percentage = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ;
	document.getElementById(counter).style.width =  parseInt((fieldWidth*percentage)/100)+"px";
	document.getElementById(counter).innerHTML="已输: "+percentage+"%"
	// color correction on style from CCFFF -> CC0000
	setcolor(document.getElementById(counter),percentage,"background-color");
	}
}

function setcolor(obj,percentage,prop){
	obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";
}