• 专注于网站建设,网络推广,关键词优化,SEO优化,专业的网站建设开发团队!

让IE支持placeholder属性

2015-11-23 21:09:02   来源:叶景网络
//JS代码
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();   
});
 
//html代码
 
<!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>
叶景网络,网络推广,网站建设
特别推荐RECOMMEND
搜索引擎网站关键词seo优化的意义
视频推广怎么做
网站seo优化怎么做关键词排上首页?
SEO介绍什么叫搜索引擎网站关键词优化
seo优化怎样做提升关键词排名
热点图文Hot
没有加www域名打不开的解决方案 没有加www域名打不
叶景网络之CodeIgniter框架的学习 叶景网络之CodeIgni
叶景网络之Ajax学习笔记 叶景网络之Ajax学习
叶景网络之DIV+CSS学习笔记 叶景网络之DIV+CSS
关注排行RANKING
1

没有加www域名打不开的解决方案

没有加www域名打不开的解决方案 网站上线了,在做SEO时发现没带www的时候访问不了,是以前的域名绑定时没做好,这对se...

2

叶景网络之CodeIgniter框架的学习

叶景网络之CodeIgniter框架的学习 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网站建...

3

叶景网络之Ajax学习笔记

叶景网络之Ajax学习笔记 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网站建...

4

叶景网络之DIV+CSS学习笔记

叶景网络之DIV+CSS学习笔记 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网站建设...

5

叶景网络之SQL注入与安全学习笔记

叶景网络之SQL注入与安全学习笔记 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网站建...

6

叶景网络之Mysql常用命令学习笔记

叶景网络之Mysql常用命令学习笔记 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网站建...

7

叶景网络之Mysql优化的学习笔记

叶景网络之Mysql优化的学习笔记 通俗地理解三个范式,对于数据库设计大有好处。 第一范式:1NF是对属性的原子性...

8

叶景网络之Gvim编辑器的学习笔记

叶景网络之Gvim编辑器的学习笔记 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网...

9

叶景网络之memcached 学习笔记

叶景网络之memcached 学习笔记 memcached 是一个高效的分布式的内存对象系统,他可以支持把各种php的数据放入...