为文本框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. 洛谷P2178 品酒大会【后缀数组】【单调栈】

    题目描述 一年一度的“幻影阁夏日品酒大会”隆重开幕了.大会包含品尝和趣味挑战 两个环节,分别向优胜者颁发“首席品酒家”和“首席猎手”两个奖项,吸引了众多品酒师参加. 在大会的晚餐上,调酒师 Rainb ...

  2. PAT天梯赛L2-003 月饼【贪心】

    L2-003. 月饼 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 月饼是中国人在中秋佳节时吃的一种传统食品,不同地区有许多不 ...

  3. c++从文件中读取一行数据并保存在数组中

    从txt文本中读取数据存入数组中 #include <iostream> #include <fstream> #include <string> #include ...

  4. codeforces 894C - Marco and GCD Sequence - [有关gcd数学题]

    题目链接:https://cn.vjudge.net/problem/CodeForces-894C In a dream Marco met an elderly man with a pair o ...

  5. XTU 1261 - Roads - [最小割][2017湘潭邀请赛B题(江苏省赛)]

    之前在网上搜了一个下午没搜到这道题的题解,然后同时又对着叉姐写的两行字题解看了一个下午: 虽然基本上已经知道了这题的思路,但愣是因为自己代码实现起来太繁复,外加不确定正确性,没敢码…… 但是一道题肝了 ...

  6. Unified Modeling Language

    https://en.wikipedia.org/wiki/Unified_Modeling_Language

  7. NTLM

    我们介绍Kerberos认证的整个流程.在允许的环境下,Kerberos是首选的认证方式.在这之前,Windows主要采用另一种认证协议——NTLM(NT Lan Manager).NTLM使用在Wi ...

  8. mySql的普通索引和复合索引

    有关普通索引和组合索引问题: 索引分单列索引和组合索引:单列索引,即一个索引只包含单个列,一个表可以有多个单列索引,但这不是组合索引:组合索引,即一个索包含多个列.   MySQL索引类型包括:   ...

  9. find a way to escape--hdu1593

    题目链接 : http://acm.hdu.edu.cn/showproblem.php?pid=1593 找到二者角速度相等时水中人的R,在此之前二者保持在一条直线上,之后水中的人沿直线到岸边S点匀 ...

  10. js-jquery-SweetAlert2【一】使用

    概述:SweetAlert2是SweetAlert-js的升级版本,它解决了SweetAlert-js中不能嵌入HTML标签的问题,并对弹出对话框进行了优化,同时提供对各种表单元素的支持,还增加了5种 ...