时间:2021-05-26
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;}
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
html5有个很棒的属性,placeholder,在鼠标聚焦到上面时候,提示文字会消失,失去焦点之后,又会出现:但是在不支持html5的低版本的浏览器中,pla
Video.js是一个通用的在网页上嵌入视频播放器的JS库,Video.js自动检测浏览器对HTML5的支持情况,如果不支持HTML5则自动使用Flash播放器
jQueryHTML5视频播放控制核心代码:您的浏览器不支持html5!$('video').click(function(){if($(this).hasCl
对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Flash,主要特性:支持多文件上传、HTML5版本可拖拽上传、实时上传进度条显
如今HTML5愈来愈引发大家的关注了,但目前支持HTML5的浏览器还不是主流,特别是国内用户近50%以上仍旧使用IE6,由于支持HTML5的IE9不支持Xp系统