<!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. DDR(一)

    P-Bank:计算机早期的一个概念.目的:匹配内存芯片和CPU芯片的数据总线的宽度.方法:并联多个内存模块. L-Bank:对内部存储阵列的分割,避免寻址冲突,提高内存效率.通过ba信号选择bank, ...

  2. [MacOS] xcrun: error: active developer path ("/Volumes/Xcode/Xcode6-Beta.app/Contents/Developer") does not exist, use xcode-select to change

    When using MacOS with xcode6-beta, i always meet these error: xcrun: error: active developer path (& ...

  3. SqlServer nvarchar中的中文字符匹配，更改SqlServer实例和数据库排序规则的办法

    我们都知道在SqlServer中的nvarchar类型可以完美的存储诸如中文这种unicode字符,但是我们会发现有时候查询语句去查询nvarchar列的时候查不出来. 为什么nvarchar类型有时 ...

  4. OpenStack 之vmware机器迁移到openstack集群

    原理 openstack本身是支持使用vmware格式的镜像的,但是是需要我们我们在/etc/nova/nova.conf的配置文件中指定该计算节点使用vmware的驱动 1 2 3 4 5 6 7 ...

  5. 操作系统，windows编程，网络，socket

    首发:个人博客,更新&纠错&回复 之前关于c/s的一篇博文只记了思路没记代码,而且表达不清晰,事后看不知所云,这个习惯要改. 这十几天学了点关于操作系统.windows编程和网络,主要 ...

  6. 强制类型转换(const_cast)

    [1] const_cast的作用 一.常量指针被转化成非常量指针,并且仍然指向原来的对象: 二.常量引用被转换成非常量引用,并且仍然指向原来的对象: 三.常量对象被转换成非常量对象. [2] 实例代 ...

  7. Spring的beans标签下可以有其他标签

    以前有对xsd(也就是schema文件)小做研究,有个小困惑,就是我们定义的元素只能使用定义的哪一些标签,比如<beans>下面就只能有自定义的哪一些,那为什么在引入<context ...

  8. Jython安装步骤

    1.下载安装包 2.执行安装 Java -jar [此处是下载的jython jar包名],或者双击jar包夜可以 3.配置环境变量 新增JYTHON_THOME的环境变量,并设置为安装路径. 配置c ...

  9. 文本框textarea实时提示还可以输入多少文字

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...

  10. Verilog语法基础讲解之参数化设计

    Verilog语法基础讲解之参数化设计   在Verilog语法中,可以实现参数化设计.所谓参数化设计,就是在一个功能模块中,对于一个常量,其值在不同的应用场合需要设置为不同的置,则将此值在设计时使用 ...