基于jquery 的插件,让IE支持placeholder属性

开发一个项目的时候为了美观和用户体验用到了input标签的placeholder属性，但是这个属性是html5中的，所以低版本的IE浏览器不支持。于是在百度找了一些解决方法，找了好几个都不是那么完美，最后决定将其中的一个拿来完善一下。

完善后的代码如下：

jQuery.fn.placeholder = function(){
    var i = document.createElement('input'),placeholdersupport ='placeholder' in i;
    if(!placeholdersupport){
        var inputs = jQuery(this);
        inputs.each(function(){
            var input = jQuery(this),
                text = input.attr('placeholder'),
                pdl = 0,height = input.outerHeight(),
                width = input.outerWidth(),
                placeholder = jQuery('<span class="phTips">'+text+'</span>');
                try{
                    pdl = input.css('padding-left').match(/d*/i)[0] * 1;
                }catch(e){
                    pdl = 5;
                }
                placeholder.css({
                    'margin-left': -(width-pdl),
                    'height':height,
                    'line-height':height+"px",
                    'position':'absolute',
                    'color': "#cecfc9",
                    'font-size' : "12px"
                });
                placeholder.click(function(){
                    input.focus();
                });
                if(input.val() != ""){
                    placeholder.css({display:'none'});
                }else{
                    placeholder.css({display:'inline'});
                }
                placeholder.insertAfter(input);
                input.keydown(function(e){
                    placeholder.css({display:'none'});
                });
                input.keyup(function(e){
                    if(jQuery(this).val() != ""){
                        placeholder.css({display:'none'});
                    }else{
                        placeholder.css({display:'inline'});
                    }
                });
            });
        }
    return this;
};

其中第33到35行代码是我加上去的，原来的代码可以用，但是键入的时候提示内容隐藏有点反应慢，分析代码后发现是对keyup引起了，增加keydown后就几近完美了。

使用时将上面的代码保存为placeholder.jquery.js.

用法：

首先引入jquery

<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

然后引入我们的插件

<script src="/js/placeholder.jquery.js"></script>

最后写上调用代码就可以了

<script>
$(document).ready(function(e) {
    $('input[placeholder]').placeholder();
});
</script>

代码参考：http://blog.163.com/yhwwen@126/blog/static/17046885320135915529172/

在此感谢代码作者！