placeholder 的 IE 下兼容实现

Mon, 03 Dec 2012 12:22:29 +0800

鉴于 placeholder 是个 html5 的属性，而恶心的 IE 一如既往的让人失望，于是自己动手丰衣足食，写了个 IE 下的 placeholder 模拟实现，效果如图

IE 8 下测试通过，IE 6 下惨不忍睹，由于这个只是个 weekend project，所以，IE 6 果断放弃，下面是代码

$(function(){
	// placeholder
	if ($.browser.msie) {
		$(':text,:password').each(function(){
			var label = $('<label>');
			label.css({
				'position' : 'absolute',
				'margin-left' : '5px',
				'margin-top' : '5px',
				'color' : 'gray'
			}).text($(this).attr('placeholder'));
			$(this).before(label).focus(function(){
				label.hide();
			}).blur(function(){
				if ($(this).val() == '') {
					label.show();
				}
			});
		});
	}
}

这个实现是有一个问题，在点击 input 框的时候，如果点击到 label 上，是会没有反应的，只能点击 input 框的空白处

===============================================

2012-12-03 15:30:30 改动一点，解决上面的问题

$(function(){
	// placeholder
	if ($.browser.msie) {
		$(':text,:password').each(function(){
			var label = $('<label>');
			label.css({
				'position' : 'absolute',
				'margin-left' : '5px',
				'margin-top' : '5px',
				'color' : 'gray',
				'z-index' : 1
			}).text($(this).attr('placeholder')).click(function(){
				label.hide().next(':input').focus();
			});
			$(this).before(label).focus(function(){
				label.hide();
			}).blur(function(){
				if ($(this).val() == '') {
					label.show();
				}
			});
		});
	}
});

Ie on ZRJ | 学习笔记

placeholder 的 IE 下兼容实现