为文本框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. 模拟线程安全的售票案例(java)

    package try51.thread.safe; import java.util.ArrayList; import java.util.Random; import java.util.con ...

  2. html的base标签

    提示:请把 <base> 标签排在 <head> 元素中第一个元素的位置,这样 head 区域中其他元素就可以使用 <base> 元素中的信息了. 注释:如果使用了 ...

  3. postgresql shell发起select操作报错ERROR: relation "tablename" does not exist

    最近安装了一套clourdera manager,其中hive元数据保存在postgresql中,因为今天想看一下hive的元数据信息,就登录了psql,连接到hive元数据库,发起select操作, ...

  4. Linux下搭建hadoop开发环境-超详细

    先决条件:开发机器需要联网 已安装java 已安装Desktop组 1.上传安装软件到linux上: 2.安装maven,用于管理项目依赖包:以hadoop用户安装apache-maven-3.0.5 ...

  5. hadoop（角色）各个组件配置信息

    1)namenode:        core-site.xml文件中决定:            <property>                <name>fs.def ...

  6. Python 字典 setdefault() 方法

    描述 Python 字典 setdefault() 方法和 get() 方法类似,返回指定键的值,如果键不在字典中,将会添加键并将值设置为一个指定值,默认为None. get() 和 setdefau ...

  7. centos7 kdump.service启动失败的解决方法

    最近接触学习使用CentOs7,命令上的确有很大变化. 加入到开机启动,可以使用下面命令来加到开机启动列表, systemctl enable xxx.service 通过下面命令可以查看有哪些是开机 ...

  8. Python 目录【持续更新中】

    Python 基础 字符编码 数据类型 文件处理 流程控制 练习题 函数,递归 匿名函数.内置函数 装饰器变形记 函数装饰器 递归 二分法 迭代器和生成器 协程函数 列表表达式 生成器表达式 异常处理 ...

  9. vue中引入awesomeswiper的方法以及编写轮播组件

    1.先安装less-loader npm install less less-loader --save 2.再安装css-loader npm install css-loader --save 3 ...

  10. jquery css样式

    1.单一样式 $('.list li').css( "float", "none"); 2.  多个样式 $('.list li').css( {        ...