让低版本浏览器支持input的placeholder属性
来源:互联网 发布:python pyqt5安装包 编辑:程序博客网 时间:2024/04/29 19:25
if( typeof input['placeholder'] == 'undefined' ) // 如果不支持placeholder属性
{
$('input').each(function( ele )
{
var me = $(this);
var ph = me.attr('placeholder');
if( ph && !me.val() )
{
me.val(ph).css('color', '#aaa').css('line-height', me.css('height'));
}
me.on('focus', function()
{
if( me.val() === ph)
{
me.val(null).css('color', '');
}
}).on('blur', function()
{
if( !me.val() )
{
me.val(ph).css('color', '#aaa').css('line-height', me.css('height'));
}
});
});
}
方法2
(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]);
}
}
}
})()
- 让低版本浏览器支持input的placeholder属性
- 让低版本浏览器兼容placeholder
- 让低版本IE浏览器支持CSS3属性
- 让低版本的IE浏览器支持HTML5
- 兼容其他不支持placeholder的浏览器(超强的让IE下支持placeholder的属性插件)
- 让所有浏览器都支持HTML5 placeholder属性
- HTML5 placeholder在低版本浏览器的解决方法
- 让IE支持placeholder属性
- 让IE支持placeholder属性
- 让IE支持placeholder属性
- 让IE支持placeholder属性~
- 让IE支持placeholder属性
- 让低版本的浏览器也支持hover(JS实现)
- 让div支持placeholder属性/模拟输入框的placeholder属性
- input属性placeholder的兼容性问题
- input标签的placeholder属性
- 如何判断浏览器是否支持placeholder属性
- html5新标签【placeholder】解决浏览器低版本不兼容问题
- Android按钮按下的时候改变颜色
- KindEditor编辑器初始化和单按钮上传控件
- 一些重要的HTML元素属性实时汇总
- solr:copyfield的简单介绍
- 记录
- 让低版本浏览器支持input的placeholder属性
- ClassLoader(包括一个工具类)
- opengl编程指南笔记(三)第二章 状态管理和绘制几何物体
- C++中的用来调试的宏
- android 典型问题:R.java文件不能自动生成的解决办法
- ActiveReports 报表控件的安装
- 快速排序
- MyEclipse无法找到BASE64Encoder
- ARM裸板开发配置流程一