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