js模仿html5 placeholder
2013-01-12 22:38 caridy 阅读(497) 评论(5) 编辑 收藏 举报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();
});