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:

 

 

posted @ 2017-07-13 14:58  名字不好起啊  阅读(255)  评论(0编辑  收藏  举报