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