实现跨浏览器的placeholder,兼容IE7

1,首先规定一下placeholder的规则

(1)文本框无内容失去焦点时,显示placeher的文字(一般是灰色字体);

(2)文本框聚焦时(还没有输入内容),placeher将消失,即文本框空白

 

(3)文本框输入内容时,placeholder也消失;

(4)文本框失去焦点时若有内容,则不显示placeholder

 

 2,核心方法

/***
 * convert Decimal str into hex(must be two bit,eg:02,f5)<br>
 *     '153'-->99
 * @param str
 */
to2Hex = function to2Hex(str) {
	var hex = parseInt(str).toString(16);
	if (hex.length === 1) {
		hex = '0' + hex;
	}
	return hex;
};

cssColor2Hex = function (cssColor) {
	var stringObj = cssColor.replace(/RGB[\s]*\(([\w,\s]+)\)[\s]*/i, "$1");
	//console.log(stringObj);
	var arr = stringObj.split(',');
	var r = com.whuang.hsj.trim(arr[0]);
	var g = com.whuang.hsj.trim(arr[1]);
	var b = com.whuang.hsj.trim(arr[2]);
	var rHex = to2Hex(r);
	var gHex = to2Hex(g);
	var bHex = to2Hex(b);
	return (rHex + gHex + bHex);
};
/***
 *
 * @param hexColor : #ccc
 * @param cssColor : [string]rgb(153, 153, 153)
 * @returns {boolean}
 */
compareColor = function compareColor(hexColor/*#789*/, cssColor/*rgb(153, 153, 153)*/) {
	if (typeof cssColor !== 'string') {
		return false;
	}
	if (hexColor === cssColor) {//IE8,jquery.css('color') will get '#ddd',but 'rgb(204, 204, 204)'
		return true;
	}
	if (com.whuang.hsj.startsWith(hexColor, '#')) {
		hexColor = hexColor.substr(1);//delete '#' in front
	}
	if (hexColor.length == 3) {
		hexColor = hexColor.substr(0, 1) + hexColor.substr(0, 1)
			+ hexColor.substr(1, 1) + hexColor.substr(1, 1) + hexColor.substr(2, 1) + hexColor.substr(2, 1);
	}
	var cssResult = cssColor2Hex(cssColor);
	return (cssResult === hexColor);
};

 在线demo:

http://123.57.250.51/static/js/form4_placehold_value.html

兼容IE7和IE7以上,火狐,chrome

源代码见附件