placeholder的兼容性探索之路
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>placeholder</title>
<style type="text/css">
.label{position: relative; display: inline-block; *zoom:1; *display: inline;
*vertical-align: middle;}
.label label{ position: absolute; left:0px; top:0; font-size: 12px;cursor: text; text-indent: 5px;}
.label input{ padding: 9px 5px; height: 14px; line-height: normal; border: 1px solid #ccc; font-size: 14px;}
</style>
</head>
<body>
请输入用户名：
<div class="label">
<label for="user">请输入用户名</label>
<input type="text" id="user" />
</div>
</body>
</html>
<script type="text/javascript">
var aLabel=document.getElementsByTagName("label")[0];
var aInput=document.getElementsByTagName("input")[0];
aLabel.style.lineHeight=aLabel.style.height=aInput.offsetHeight+"px";
if (aInput.value.length!=0){
aLabel.style.display="none"
}else{
aLabel.style.display="block"
};
aInput.onfocus=function(){
aLabel.style.display="none";
}
aInput.onblur=function(){
if (aInput.value.length!=0){
aLabel.style.display="none"
}else{
aLabel.style.display="block";
}; } </script>
方法二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>placeholder</title>
</head>
<body>
<input type="text" placeholder="请输入用户名" />
</body>
</html>
<script>
function placeholder(opts){
if("placeholder" in document.createElement('input')){
return;
}else{
this.obj=opts.obj;
this.init();
this.focus();
this.blur();
}
}
placeholder.prototype.init= function(){
if (this.obj.getAttribute("placeholder") && this.obj.value.length==0){
this.obj.value=this.obj.getAttribute("placeholder");
}
};
placeholder.prototype.focus=function(){
var _this=this;
this.obj.onfocus=function(){
if (_this.obj.value==_this.obj.getAttribute("placeholder")){
_this.obj.value="";
};
}
};
placeholder.prototype.blur=function(){
var _this=this;
this.obj.onblur=function(){
if (_this.obj.value.length==0){
_this.obj.value=_this.obj.getAttribute("placeholder");
};
}
};
var aInput=document.getElementsByTagName("input")[0];
new placeholder({"obj":aInput});
</script>
方法三，
背景图片，限制太多，代码就不贴上来了
placeholder的兼容性探索之路的更多相关文章
- 对于placeholder浏览器兼容性（包括密码输入框）解决办法
将以下脚本和样式引入你的页面(对于密码输入框,要设置ID属性值): <script type="text/javascript"> $(function () { // ...
- 解决HTML5中placeholder属性兼容性的JQuery插件
//调用方法 $(function () { $(".pHolder").jason(); }); //HTML代码 <input type="text&quo ...
- placeholder不兼容 IE10 以下版本的解决方法
对于密码输入框placeholder的兼容问题:HTML代码:<input type="password" id="loginPassword" plac ...
- 让Placeholder在IE中燥起来
网上有好多关于这方面解决兼容性问题的文章,很多招式,学会这一招,让你轻松搞定Placeholder的兼容性,叫我好人,拿走,不谢.... placeholder属性是HTML5 中为input添加的. ...
- 跨浏览器实现placeholder效果的jQuery插件
曾经遇到这样一个问题,处理IE8密码框placeholder属性兼容性.几经周折,这个方案是可以解决问题的. 1.jsp页面引入js插件 <script type="text/java ...
- html5 placeholder属性兼容ie11
placeholder 属性是html5的属性,用于提供描述输入字段预期值的提示信息(hint). 简单例子: <!DOCTYPE HTML> <html> <body& ...
- HTML 使用CSS 如何去掉文本聚焦框 HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input、textarea输入框placeholder样式
HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input.textarea输入框placeholder样式 兼容性代码: input::-webkit-input ...
- placeholder IE兼容，显示password
从网上找了很多关于placeholder IE兼容性的问题,下边的这个js方法可以显示password. <!doctype html> <html lang="en&qu ...
- 我写的一些前端开源项目（均托管到github）
大部分项目都是平时项目用到的某些功能,觉得有趣或者复用性有点高就提取成一个单独项目来做维护 coffee-tmpl : 一个极简的模板引擎和ejs及underscore的template类似 turn ...
随机推荐
- python入门语法总结 zz
http://renjie120.iteye.com/blog/680126 1.python是一个解释性语言: 一个用编译性语言比如C或C++写的程序可以从源文件(即C或C++语言)转换到一个你的计 ...
- session讲解（一）——登录网页练习
第一:登陆网页的表单页面login.php <body> <h1>登陆</h1> <form action="loginchuli.php" ...
- [MacOSX]
When i run svn up in the folder, i got these error: svn: Error converting entry in directory 'XXXXX' ...
- 【crunch bang】 tint2-用来控制桌面的布局
tint2配置: #--------------------------------------------- # TINT2 CONFIG FILE #----------------------- ...
- url传参
1.两种url形式传参index.php/action/function/id/2 这种模式下:$_GET[action]就是function,$_GET[id]就是2
- PHP 文件上传的综合实例
1.upload.php <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <htm ...
- 关于基于.NET Framework的网络通信程序底层扫盲
引自<三维游戏引擎的设计与实现>书中9.3节: 如果服务端在.Net Framework基础上开发,那么可以直接选择使用.Net Framework提供的Socket类, ...
- 创建与删除SQL约束或字段约束
1)禁止所有表约束的SQLselect 'alter table '+name+' nocheck constraint all' from sysobjects where type='U'2)删除 ...
- ILOG的一个基本应用——解决运输问题、转运问题
一.Ilog软件 该软件用来解决优化问题,大部分是线性问题,深一点的其他内容还不清楚.只知道一些基础的应用,网上相关内容很少.接下来就解决一个简单的运输问题 二.运输问题 数学模型 ILOG OPL程 ...
- nginx 反向代理 和lvs负载均衡
nginx反向代理:用户请求nginx代理服务器然后代理服务器将用户请求转为服务器再由nginx代理服务器将服务器的响应反应给用户. lvs负载均衡:用户请求nginx代理服务器然后代理服务器将用户请 ...