让IE支持placeholder属性~

时间:2022-12-01 18:13:07

1. [代码][JavaScript]代码     

?
123456789101112131415161718192021222324252627282930313233343536373839404142 /* * jQuery placeholder, fix for IE6,7,8,9 * @author JENA * @since 20131115.1504 * @website ishere.cn */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();   });

2. [代码]使用方法     跳至 [1] [2] [全屏预览]

?
123456789101112131415161718192021222324252627 <!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>