js模仿html5 placeholder

html5原生支持placeholder，对于不支持的浏览器（ie），可用js模拟实现。
js代码

 1 (function(){
 2     //判断是否支持placeholder
 3     function isPlaceholer(){
 4         var input = document.createElement('input');
 5         return "placeholder" in input;
 6     }
 7     //不支持的代码
 8     if(!isPlaceholer()){
 9         //创建一个类
10         function Placeholder(obj){
11             this.input = obj;
12             this.label = document.createElement('label');
13             this.label.innerHTML = obj.getAttribute('placeholder');
14             this.label.style.cssText = 'position:absolute; text-indent:4px;color:#999999; font-size:12px;';
15             if(obj.value != ''){
16                 this.label.style.display = 'none';
17             }
18             this.init();
19         }
20         Placeholder.prototype = {
21             //取位置
22             getxy : function(obj){
23                 var left, top;
24                 if(document.documentElement.getBoundingClientRect){
25                     var html = document.documentElement,
26                         body = document.body,
27                         pos = obj.getBoundingClientRect(),
28                         st = html.scrollTop || body.scrollTop,
29                         sl = html.scrollLeft || body.scrollLeft,
30                         ct = html.clientTop || body.clientTop,
31                         cl = html.clientLeft || body.clientLeft;
32                     left = pos.left + sl - cl;
33                     top = pos.top + st - ct;
34                 }
35                 else{
36                     while(obj){
37                         left += obj.offsetLeft;
38                         top += obj.offsetTop;
39                         obj = obj.offsetParent;
40                     }
41                 }
42                 return{
43                     left: left,
44                     top : top
45                 }
46             },
47             //取宽高
48             getwh : function(obj){
49                 return {
50                     w : obj.offsetWidth,
51                     h : obj.offsetHeight
52                 }
53             },
54             //添加宽高值方法
55             setStyles : function(obj,styles){
56                 for(var p in styles){
57                     obj.style[p] = styles[p]+'px';
58                 }
59 },
60             init : function(){
61                 var label = this.label,
62                     input = this.input,
63                     xy = this.getxy(input),
64                     wh = this.getwh(input);
65                 this.setStyles(label, {'width':wh.w, 'height':wh.h, 'lineHeight':20, 'left':xy.left, 'top':xy.top});
66                 document.body.appendChild(label);
67                 label.onclick = function(){
68                     this.style.display = "none";
69                     input.focus();
70                 }
71                 input.onfocus = function(){
72                     label.style.display = "none";
73                 };
74                 input.onblur = function(){
75                     if(this.value == ""){
76                         label.style.display = "block";
77                     }
78                 };
79             }
80         }
81         var inpColl = document.getElementsByTagName('input'),
82             textColl = document.getElementsByTagName('textarea');
83         //html集合转化为数组
84         function toArray(coll){
85             for(var i = 0, a = [], len = coll.length; i < len; i++){
86                 a[i] = coll[i];
87             }
88             return a;
89         }
90         var inpArr = toArray(inpColl),
91             textArr = toArray(textColl),
92             placeholderArr = inpArr.concat(textArr);
93         for (var i = 0; i < placeholderArr.length; i++){
94             if (placeholderArr[i].getAttribute('placeholder')){
95                 new Placeholder(placeholderArr[i]);
96             }
97         }
98     }
99 })()

html代码：

1 <div>
2     <input type="text" placeholder="提示1" /><br>
3     <textarea placeholder="提示2" /></textarea><br>
4     <input type="text" placeholder="提示3" /><br>
5 </div>

css代码：

1 div,input,textarea{ margin:0; padding:0;}
2 div{width:400px; margin:100px auto 0;}
3 input,textarea{width:200px;height:20px; margin-top:5px;line-height:20px;border:1px #666666 solid; background-color:#fff; padding-left:2px;}
4 textarea{ height:60px; font-size:12px; resize:none;}

 

 

貌似上面的不支持IE，不知道什么原因，又找了个jquery的可以做。

如果使用

<input type="text" id="test" placeholder="可以提示使用者輸入些什麼">

你可能會發現在 firefox 、google chrome 都正常

但在 ie 就沒有效果

還好這時候有這個~

有人整理的非常好了^_^

https://github.com/mathiasbynens/jquery-placeholder

連demo都很完整了

http://mathiasbynens.be/demo/placeholder

總之，把以下的code貼到 head 就能跑了

    <script src="http://3wa.tw/inc/javascript/jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
    <!--fix placeholder  
       $('input, textarea').placeholder();
    -->
    <script src="http://3wa.tw/inc/javascript/jquery/jquery-placeholder/jquery.placeholder.min.js" type="text/javascript"></script>  
    // 修正 placeholder 
    $(document).ready(function() {
      $('input, textarea').placeholder();
    });