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 相关文章推荐
CheckBox 如何实现全选?
Jun 23 Javascript
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
JS中的多态实例详解
Oct 15 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 Javascript
javascript+css实现俄罗斯方块小游戏
Jun 28 Javascript
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结合安卓客户端实现查询交互实例
2015/05/05 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
ppk谈JavaScript style属性
2008/10/10 Javascript
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
[00:57]辉夜杯战队访谈宣传片—VG
2015/12/25 DOTA
Python生成随机密码
2015/03/10 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
如何让python的运行速度得到提升
2020/07/08 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
2014年医院党建工作总结
2014/12/20 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
婚宴新郎致辞
2015/07/28 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers