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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <script type="text/javascript">
  5.     function inputEvent(obj){
  6.         if(obj.value){
  7.             document.getElementsByTagName('label')[0].style.visibility = "hidden";
  8.         }else{
  9.             document.getElementsByTagName('label')[0].style.visibility = "visible";
  10.         }
  11.     }
  12.     function labelEvent(){
  13.         document.getElementsByTagName('input')[0].focus();
  14.     }
  15.     </script>
  16. </head>
  17. <body>
  18.     <div>
  19.         <label style="position:absolute;color:gray;"  onclick="labelEvent()">User Name</label>
  20.         <input type="text" onkeyup="inputEvent(this)" />
  21.     </div>
  22. </body>
  23. </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. ELK之生产日志收集构架（filebeat-logstash-redis-logstash-elasticsearch-kibana）

    本次构架图如下 说明: 1,前端服务器只启动轻量级日志收集工具filebeat(不需要JDK环境) 2,收集的日志不进过处理直接发送到redis消息队列 3,redis消息队列只是暂时存储日志数据,不 ...

  2. HDU 2476 String painter（区间DP）

    String painter Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...

  3. 【转】JavaScript prototype

    原文地址:http://www.cnblogs.com/dolphinX/p/3286177.html 用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初 ...

  4. Google词向量word2vec的使用

    """ 1.在自然语言处理中常常使用预训练的word2vec,这个预训练的词向量可以使用google的GoogleNews-vectors-negative300.bin ...

  5. 《SEO在网页制作中的应用》视频笔记

    学习了慕课网<SEO在网页制作中的应用>视频,今天将里面的知识整理一下. 一.SEO介绍 1.  搜索引擎工作原理 搜索引擎现在主流有百度.谷歌.360,他们都有庞大的搜索引擎数据库,每个 ...

  6. AOP 详解

    1. 需求:统计方法执行的性能情况(来源:<精通Spring 4.x>) // 性能监视类 PerformanceMonitor package com.noodles.proxy; pu ...

  7. Qt Creator 4.3.0，Quick Designer里面也看以同时看到和编辑qml code了（Qt5.9的配套IDE）

    作者:Summer Fang链接:https://www.zhihu.com/question/60486611/answer/177584284来源:知乎著作权归作者所有.商业转载请联系作者获得授权 ...

  8. mysql 操作sql语句 操作数据表

    #2. 操作文件 先切换到文件夹下:use db1 查看当前所在的数据库 mysql> select database(); +------------+ | database() | +--- ...

  9. dedecms提取某栏目及子栏目名称到首页怎么弄

    我们建网站时有不同的需求,例如为页面创建一个栏目导航,用dedecms如何提取某栏目及子栏目名称和链接呢?如下图所示,先列出指定的顶级栏目,在下方再列出此栏目的所有子栏目. 之前ytkah说过dede ...

  10. 当前数据库普遍使用wait-for graph等待图来进行死锁检测

    当前数据库普遍使用wait-for graph等待图来进行死锁检测 较超时机制,这是一种更主动的死锁检测方式,innodb引擎也采用wait-for graph SQL Server也使用wait-f ...