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


Posted in Javascript onJanuary 13, 2013

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;}
Javascript 相关文章推荐
JavaScript ECMA-262-3 深入解析.第三章.this
Sep 28 Javascript
js自执行函数的几种不同写法的比较
Aug 16 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
May 11 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
JS实现unicode和UTF-8之间的互相转换互转
Jul 05 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
详解微信小程序中组件通讯
Oct 30 Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 #Javascript
关于全局变量和局部变量的那些事
Jan 11 #Javascript
jquery延迟加载外部js实现代码
Jan 11 #Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
Jan 11 #Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
Jan 11 #Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 #Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 #Javascript
You might like
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
解析php中const与define的应用区别
2013/06/18 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
php二分查找二种实现示例
2014/03/12 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
PHP实现路由映射到指定控制器
2016/08/13 PHP
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
js回调函数仿360开机
2019/12/26 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
Python ftp上传文件
2016/02/13 Python
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
《金子》教学反思
2014/04/13 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
就业证明函
2015/06/17 职场文书
2019年最新借条范本!
2019/07/08 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL
Golang获取List列表元素的四种方式
2022/04/20 Golang