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 相关文章推荐
jQuery 入门级学习笔记及源码
Jan 22 Javascript
js强制把网址设为默认首页
Sep 29 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 Javascript
fullpage.js最后一屏滚动方式
Feb 06 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
深入理解JavaScript的async/await
Aug 05 Javascript
js滚轮事件 js自定义滚动条的实现
Jan 18 Javascript
js实现超级玛丽小游戏
Mar 18 Javascript
JavaScript对象字面量和构造函数原理与用法详解
Apr 18 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文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
php设计模式  Command(命令模式)
2011/06/17 PHP
解析PHP的session过期设置
2013/06/29 PHP
PHP多文件上传类实例
2015/03/07 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
php生成HTML文件的类方法
2019/10/11 PHP
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
javascript回调函数详解
2018/02/06 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
python实现多线程采集的2个代码例子
2014/07/07 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
python语音识别实践之百度语音API
2018/08/30 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
Python File(文件) 方法整理
2019/02/18 Python
详解如何设置Python环境变量?
2019/05/13 Python
简单了解python的内存管理机制
2019/07/08 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
10张动图学会python循环与递归问题
2021/02/06 Python
python元组拆包实现方法
2021/02/28 Python
买房委托公证书
2014/04/08 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
个人委托书范文
2015/01/28 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书