作家
登录

js模仿html5 placeholder适应于不支持的浏览器

作者: 来源:www.28hudong.com 2013-03-30 00:13:16 阅读 我要评论

html5原生支持placeholder,对于不支持的浏览器(ie),可用js模拟实现。 js代码 复制代码 代码如下: (function(){ //判断是否支持placeholder function isPlaceholer(){ var input = document.createElement('input'); return "placeholder" in input; } //不支持的代码 if(!isPlaceholer()){ //创建一个类 function Placeholder(obj){ this.input = obj; this.label = document.createElement('label'); this.label.innerHTML = obj.getAttribute('placeholder'); this.label.style.cssText = 'position:absolute; text-indent:4px;color:#999999; font-size:12px;'; if(obj.value != ''){ this.label.style.display = 'none'; } this.init(); } Placeholder.prototype = { //取位置 getxy : function(obj){ var left, top; if(document.documentElement.getBoundingClientRect){ var html = document.documentElement, body = document.body, pos = obj.getBoundingClientRect(), st = html.scrollTop || body.scrollTop, sl = html.scrollLeft || body.scrollLeft, ct = html.clientTop || body.clientTop, cl = html.clientLeft || body.clientLeft; left = pos.left + sl - cl; top = pos.top + st - ct; } else{ while(obj){ left += obj.offsetLeft; top += obj.offsetTop; obj = obj.offsetParent; } } return{ left: left, top : top } }, //取宽高 getwh : function(obj){ return { w : obj.offsetWidth, h : obj.offsetHeight } }, //添加宽高值方法 setStyles : function(obj,styles){ for(var p in styles){ obj.style[p] = styles[p]+'px'; } }, init : function(){ var label = this.label, input = this.input, xy = this.getxy(input), wh = this.getwh(input); this.setStyles(label, {'width':wh.w, 'height':wh.h, 'lineHeight':20, 'left':xy.left, 'top':xy.top}); document.body.appendChild(label); label.onclick = function(){ this.style.display = "none"; input.focus(); } input.onfocus = function(){ label.style.display = "none"; }; input.onblur = function(){ if(this.value == ""){ label.style.display = "block"; } }; } } var inpColl = document.getElementsByTagName('input'), textColl = document.getElementsByTagName('textarea'); //html集合转化为数组 function toArray(coll){ for(var i = 0, a = [], len = coll.length; i < len; i++){ a[i] = coll[i]; } return a; } var inpArr = toArray(inpColl), textArr = toArray(textColl), placeholderArr = inpArr.concat(textArr); for (var i = 0; i < placeholderArr.length; i++){ if (placeholderArr[i].getAttribute('placeholder')){ new Placeholder(placeholderArr[i]); } } } })() html代码: 复制代码 代码如下: <div> <input type="text" placeholder="提示1" /><br> <textarea placeholder="提示2" /></textarea><br> <input type="text" placeholder="提示3" /><br> </div> css代码: 复制代码 代码如下: div,input,textarea{ margin:0; padding:0;} div{width:400px; margin:100px auto 0;} input,textarea{width:200px;height:20px; margin-top:5px;line-height:20px;border:1px #666666 solid; background-color:#fff; padding-left:2px;} textarea{ height:60px; font-size:12px; resize:none;}

  推荐阅读

  jQuery使用动态渲染表单功能完成ajax文件下载

复制代码 代码如下:// Ajax 文件下载 jQuery.download = function(url, data, method){ // 获取url和data if( url && data ){ // data 是 string 或者 array/object data = typeof data == 'string' ? data : jQue>>>详细阅读


本文标题:js模仿html5 placeholder适应于不支持的浏览器

地址:http://www.17bianji.com/kaifa2/JS/22533.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)