placeholder 的 IE 下兼容实现

鉴于 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();
				}
			});
		});
	}
});

Leave a Reply

Your email address will not be published. Required fields are marked *