• 让IE支持placeholder属性


     

      

    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');
                // 如果当前输入框中有值,不做处理
                if (self.val() != '') {
                    // jquery each方法,return true = continue; return false = break;
                    return true;
                }
    
                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:'5px', 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();
    });
    

      

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery JPlaceholder Demo</title>
    <script src="jquery-1.8.3.min.js"></script>
    <script src="jquery.JPlaceholder.js"></script>
    </head>
     
    <body>
    <form>
    <div>
      <ul>
        <li>
          <input type="text" name="username" placeholder="用户名">
        </li>
        <li>
          <input type="password" name="username" placeholder="密码">
        </li>
        <li>
          <button type="button">登录</button>
        </li>
      </ul>
    </div>
    </form>
    </body>
    </html>
    

      

  • 相关阅读:
    Springmvc构造RESTful详细讲解
    Http和Socket连接区别
    整合struts2+hibernate详细配置步骤及注意事项
    spring,hibernate,struts的面试笔试题
    泛型中? super T和? extends T的区别
    Java中有关Null的9件事
    Eclipse中的快捷键总结
    Hibernate之Query接口的uniqueResult()方法
    Hibernate插入、查询、删除操作 HQL
    JQuery中$.ajax()方法参数详解 转载
  • 原文地址:https://www.cnblogs.com/adtuu/p/5047249.html
Copyright © 2020-2023  润新知