为文本框input添加文字输入提示，H5为input提供了一个placeholder属性。在支持H5的浏览器中，用此属性设置输入提示，简单方便，但是对于IE8以下版本，都不支持placeholder属性，此时必须通过另外的方式来实现输入提示。

其实，我们可以利用label标签来模拟placeholder属性。先看例子，后解释：

<!DOCTYPE html>

<html>

<head>

    <script type="text/javascript">

    function inputEvent(obj){

        if(obj.value){

            document.getElementsByTagName('label')[0].style.visibility = "hidden";

        }else{

            document.getElementsByTagName('label')[0].style.visibility = "visible";

        }

    }

    function labelEvent(){

        document.getElementsByTagName('input')[0].focus();

    }

    </script>

</head>

<body>

    <div>

        <label style="position:absolute;color:gray;"  onclick="labelEvent()">User Name</label>

        <input type="text" onkeyup="inputEvent(this)" />

    </div>

</body>

</html>

看到这里估计就很清楚了，label标签本来是为input标签定义标注的，这里把label标签的样式设置为绝对定位，定位到input输入框中，然后再利用click事件和keyup事件来控制label的显示及隐藏，通过这种方式可以“屏蔽”placeholder属性的跨浏览器的兼容性问题。

解决input标签placeholder属性浏览器兼容性问题的一种方法的更多相关文章

  1. 前端 html input标签 placeholder属性 标签上显示内容

    前端 html  input标签 的placeholder属性  标签上显示内容 <!DOCTYPE html> <html lang="en"> < ...

  2. ie8不兼容input的placeholder属性但是要实现其效果的方法

    通过学习前辈的思想,个人想法整理如下: 通过两个元素标签,仿造出placeholder的内容 使用position定位好两个元素标签 第一要隐藏两个元素标签display:none,在<!--[ ...

  3. html <input>标签类型属性type(file、text、radio、hidden等)详细介绍

    html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...

  4. Hmtl5 <input>中placeholder属性（新属性）

    Hmtl5 <input>中placeholder属性(新属性) 一.定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示 ...

  5. 解决C#程序只允许运行一个实例的几种方法详解

    解决C#程序只允许运行一个实例的几种方法详解 本篇文章是对C#中程序只允许运行一个实例的几种方法进行了详细的分析介绍,需要的朋友参考下 本文和大家讲一下如何使用C#来创建系统中只能有该程序的一个实例运 ...

  6. a标签点击不跳转的几种方法

    a标签点击不跳转的几种方法 1.onclick事件中返回false <a href="http://www.baidu.com" onclick="return f ...

  7. 解决input 中placeholder的那些神坑

    **昨天后台小哥哥提到placehold无法显示问题,我这边总结一下,顺便写个小文章分享给大家..** ============================================== 一 ...

  8. input 的 placeholder属性在IE8下的兼容处理

    placeholder是input标签的新属性,在使用的时候有两个问题: 1.IE8 下不兼容 处理思路: 如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿 ...

  9. 修改 input / textarea placeholder 属性的颜色和字体大小

    话不多说,直接上代码: input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666; fon ...

随机推荐

  1. Hibernate框架 主配置文件 Hibernate.cfg.xml 映射配置 说明

    1 主配置文件 Hibernate.cfg.xml 主配置文件中主要配置:数据库连接信息.其他参数.映射信息! 常用配置查看源码: hibernate-distribution-3.6.0.Final ...

  2. 为什么 Redis 重启后没有正确恢复之前的内存数据

    安装 Redis 后,默认配置下启动会得到如下日志: [] Sep ::! Background save may fail under low memory condition. To fix th ...

  3. cmake practice一文中安装可执行文件的方法

    在学习cmake practice第四章中,第四章的任务如下 修改 Helloworld 支持安装在本节开头我们定义了本节的任务如下:1,为工程添加一个子目录 src,用来存储源代码;2,添加一个子目 ...

  4. 从经典面试题看java中类的加载机制

    1.概述 类加载是Java程序运行的第一步,研究类的加载有助于了解JVM执行过程,并指导开发者采取更有效的措施配合程序执行,对理解java虚拟机的连接模型和java语言的动态性都有很大帮助. 由于Ja ...

  5. LoadRunner-迭代和并发设置

    迭代:指运行一次脚本时某段代码块(action)循环执行的次数,串行执行 并发:指同时运行脚本的次数,并行执行(多个用户同时跑) 以下是用例和对应的相关设置 Iterations是在Vuser Gen ...

  6. Python开发【笔记】：什么是RESTful框架

    RESTful框架 前言:  一句话总结:用URL定位资源,用HTTP描述操作 越来越多的人开始意识到,网站即软件,而且是一种新型的软件. 这种"互联网软件"采用客户端/服务器模式 ...

  7. MySQL中死锁

    1 .死锁的概念 是指两个或两个以上的事务在执行过程中,因争夺资源而造成的一种互相等待的现象.若无外力作用,事务都将无法推进下去,解决死锁的最简单问题是不要有等待,任何的等待都转换为回滚,并且事务重新 ...

  8. Kylin安装问题--/home/hadoop-2.5.1/contrib/capacity-scheduler/.jar (No such file or directory)

    WARNING: Failed to process JAR [jar:file:/home/hadoop-2.5.1/contrib/capacity-scheduler/.jar!/] for T ...

  9. break continue练习

    break :跳出 1.当break单独存在时,下面不要定义其他语句,因为执行不到. 2.如果出现了循环嵌套,break响应跳出指定的循环,可以通过标号来完成 例如: continue:要么是swit ...

  10. PAT 1034 Head of a Gang[难][dfs]

    1034 Head of a Gang (30)(30 分) One way that the police finds the head of a gang is to check people's ...