ie9 与 placeholder 问题

　　大家肯定都使用过 input 框，它存在于各种地方，方便我们进行输入操作，还有 placeholder 属性来起到提示的作用。然而，ie 下并不支持，于是乎，查了查，发现 jquery 能实现：

var JPlaceHolder = {
    //检测
    _check : function(){
        return 'placeholder' in document.createElement('input');
    },
    //初始化
    init : function(){
        if(!this._check()){
            this.fix();
        }
    },
    //修复
    fix : function(){
        jQuery(':input[placeholder]').each(function(index, element) {

        　 var self = $(this), txt = self.attr('placeholder');
    　　　　self.wrap($('<div></div>').css({position:'relative', zoom:'1', border:'none', background:'none', padding:'none', margin:'none'}));

    　　　　var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left');

    　　　　var holder = $('<span></span>').text(txt).css({position:'absolute', left:pos.left, top:pos.top, height:h, lienHeight:h, paddingLeft:paddingleft, color:'#aaa'}).appendTo(self.parent());

    　　　　self.focusin(function(e) {
       　　　　 holder.hide();
    　　　　}).focusout(function(e) {
    　　　　　　if(!self.val()){
      　　　　 　　 holder.show();
    　　　　　　}
　　　　　　 });
       　　holder.click(function(e) {
            　　holder.hide();
            　　self.focus();
       　　});
       });
　　}
};
//执行
jQuery(function(){
　　JPlaceHolder.init();    
});    

　　再调用：

<input type="text" name="username" placeholder="用户名">

　　ie9 下可以用了，但跟谷歌比起来，还是有差异的，没办法，毕竟是浏览器的差异，这个不可能单用一个 placeholder 来弥补。

　　想让 ie9 下得 input 框提示词也像谷歌一样，光标放上也有提示该怎么办呢？

　　灵机一动~有了！

　　插入背景图片可以呀，而且还很简单，做个判断就好，获得焦点后又没有内容时就显示背景图片就好了呀！

　　 图片：

　　样式：

<style>
　　.placeholder {
　　　　background-image: url(placeholder.png);
　　　　background-repeat: no-repeat;
　　　　background-size: 56%;
　　　　background-position: -7px -10px;
　　}
</style>

　　调用：

<input type="text" ng-model="inputValue" ng-class="{'placeholder':!inputValue}">

　　这里我用到了 angular 来进行判断。是不是 so easy ！！！

 

　　chrome：

　　ie9：