<!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的兼容性探索之路的更多相关文章

  1. 对于placeholder浏览器兼容性(包括密码输入框)解决办法

    将以下脚本和样式引入你的页面(对于密码输入框,要设置ID属性值): <script type="text/javascript"> $(function () { // ...

  2. 解决HTML5中placeholder属性兼容性的JQuery插件

    //调用方法 $(function () {   $(".pHolder").jason(); }); //HTML代码 <input type="text&quo ...

  3. placeholder不兼容 IE10 以下版本的解决方法

    对于密码输入框placeholder的兼容问题:HTML代码:<input type="password" id="loginPassword" plac ...

  4. 让Placeholder在IE中燥起来

    网上有好多关于这方面解决兼容性问题的文章,很多招式,学会这一招,让你轻松搞定Placeholder的兼容性,叫我好人,拿走,不谢.... placeholder属性是HTML5 中为input添加的. ...

  5. 跨浏览器实现placeholder效果的jQuery插件

    曾经遇到这样一个问题,处理IE8密码框placeholder属性兼容性.几经周折,这个方案是可以解决问题的. 1.jsp页面引入js插件 <script type="text/java ...

  6. html5 placeholder属性兼容ie11

    placeholder 属性是html5的属性,用于提供描述输入字段预期值的提示信息(hint). 简单例子: <!DOCTYPE HTML> <html> <body& ...

  7. HTML 使用CSS 如何去掉文本聚焦框 HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input、textarea输入框placeholder样式

    HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input.textarea输入框placeholder样式  兼容性代码: input::-webkit-input ...

  8. placeholder IE兼容,显示password

    从网上找了很多关于placeholder IE兼容性的问题,下边的这个js方法可以显示password. <!doctype html> <html lang="en&qu ...

  9. 我写的一些前端开源项目(均托管到github)

    大部分项目都是平时项目用到的某些功能,觉得有趣或者复用性有点高就提取成一个单独项目来做维护 coffee-tmpl : 一个极简的模板引擎和ejs及underscore的template类似 turn ...

随机推荐

  1. beta-1阶段各组员的贡献分分配

    小组名称:nice! 小组成员:李权 于淼 刘芳芳 韩媛媛 宫丽君 项目内容:约跑app 分数分配规则 个人贡献分=基本贡献分*0.2+特殊贡献分*0.3+个人代码贡献量*0.5 其中 基本贡献分,特 ...

  2. 【转】SQL Server T-SQL高级查询

    SQL Server T-SQL高级查询 高级查询在数据库中用得是最频繁的,也是应用最广泛的. Ø 基本常用查询 --select select * from student; //查询student ...

  3. tmpfs

    什么是tmpfs tmpfs是Linux/Unix系统上的一种基于内存的文件系统.tmpfs可以使用您的内存或swap分区来存储文件.由此可见,temfs主要存储暂存的文件. linux内核中的VM子 ...

  4. JBuilder链接sql server数据库

    加载你的jdbc的驱动             一.将jdbc驱动解压到一个指定的目录,例如:c:\sql_server_jdbc,                其中包含三个驱动文件:msbase. ...

  5. 安装LAMP

    1.首先打开命令行,获得最新的软件包 sudo apt-get install update 2.安装MySQL数据库 sudo apt-get install mysql-server mysql- ...

  6. Install DBD::mysql for Perl in XAMPP in Mac , solving errors

    我不知道 why,在 Mac 安装 DBI::mysql 总会报错 我为了给 cgi-bin 添加 mysql-perl 数据库支持,也是够麻烦的 make sure that mysql and m ...

  7. [转]微软SerialPort秘籍[SerialPort为什么死锁程序的分析]

    既然是秘籍,显然是写一些大家不常找到的,MSDN里遗漏提示大家注意的东西. 用过.net 2.0中,自带SerialPort的人,大多都遇到过.莫名其妙的执行Close的时候会死掉的问题.而Wince ...

  8. C#:控制WinForm界面的显示

    控制WinForm界面在屏幕的四个角落显示,具体代码中有说明: using System; using System.Collections.Generic; using System.Drawing ...

  9. Oracle性能优化--DBMS_PROFILER

      想看到过程或者函数执行每一步的过程:想看到每一步所占的时间吗?借助profiler吧:它可以满足你来分析过程/函数执行比较久:可以直接快速找到病因:从而可以优化那一步需要优化下.        一 ...

  10. AR专用汉明码

    增强现实技术(Augmented Reality,简称 AR),是一种实时地计算摄影机影像的位置及角度并加上相应图像.视频.3D模型的技术,这种技术的目标是在屏幕上把虚拟世界套在现实世界并进行互动. ...