placeholder是一个很有用的属性，可以提示用户在input框中输入正确的内容，但是IE8以及IE8一下的浏览器不支持该属性，我们可以使用js来模拟相似的效果。下面直接上代码：

<!doctype html>

<html>

<header>

<meta charset="utf-8">

<title>placeholder</title>

<style type="text/css">

*{margin:0;padding:0;}

form {margin:50px;}

input {display:block;margin:0 0 6px 0;}

</style>

</header>

<body>

    <form>

        用户名：<input name="name" placeholder="请输入用户名"/>

        密码：<input name="password" placeholder="请输入登陆密码"/>

    </form>

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>

<script type="text/javascript">

$(function(){

    function placeholderSupport() {    // 判断浏览器是否支持 placeholder

        return 'placeholder' in document.createElement('input');

    }

    if(!placeholderSupport()){

        $(document).on('focus', '[placeholder]',function() {

            var input = $(this);

            if (input.val() == input.attr('placeholder')) {

                input.val('');

                input.removeClass('placeholder');

            }

        });

        $(document).on('blur', '[placeholder]',function() {

            var input = $(this);

            if (input.val() == '' || input.val() == input.attr('placeholder')) {

                input.addClass('placeholder');

                input.val(input.attr('placeholder'));

            }

        });

        $('[placeholder]').blur();

    };

});

</script>

</body>

</html>

'placeholder' in document.createElement('input') ，该行代码利用 in 表达式来判断浏览器中的 input 元素中是否有 placeholder 属性存在。

$('[placeholder]') 是一个Jquery 的属性选择器，选择页面上所有的具有 placheholder 属性的元素。在页面加载完成时我们首先调用  blur() 方法，将所有 input 元素的值 设置 为 input 属性 placeholder 对应的值，从而模拟 placeholder 的效果。

效果如下图所示：

选中 input 时的效果：

在IE8等不支持placeholder属性的浏览器中模拟placeholder效果的更多相关文章

  1. html5的placeholder属性（IE如何兼容placeholder属性）

    界面UI推荐 jquery html5 实现placeholder兼容password  IE6 html5的placeholder属性(IE如何兼容placeholder属性) 2013-01-05 ...

  2. onunload事件火狐不支持，在IE浏览器中，只有刷新时该事件才发生

    onunload事件火狐不支持,在IE浏览器中,只有刷新时该事件才发生

  3. 解决seajs ie8 对象不支持charAt 属性。

    在使用 seajs做项目,今天偶然发现在ie9以下的ie版本会 报出 对象不支持charAt 属性.刚开始还以为是自己写的js部分出了问题,经过几个小时的奋战.最终找到了其根源.在sea-debug. ...

  4. 【工作笔记五】html5的placeholder属性（IE如何兼容placeholder属性）

    placeholder属性,IE对其的支持表示无奈,firefox.google chrome表示毫无压力. HTML5对Web Form做了许多增强,比如input新增的type类型.Form Va ...

  5. 给IE9及其以下等不支持classList属性的浏览器,添加classList属性

    // 解决IE9及其以下 不支持classList属性的问题 if (!("classList" in document.documentElement)) { Object.de ...

  6. 兼容的placeholder属性

    作为一个.net后台开发的程序猿,博客里既然大多都是前端相关的博文.是不是该考虑换方向了,转前端开发得了 ... 小小吐槽一下,近期受该不该跳槽所困惑,我有选择困难症! 继续前端,这次说一下输入框 p ...

  7. HTML5表单提示placeholder属性兼容IE

    placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <inpu ...

  8. HTML 5 <input> placeholder 属性

    原文链接:http://www.w3school.com.cn/html5/att_input_placeholder.asp HTML 5 <input> placeholder 属性 ...

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

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

随机推荐

  1. python编码问题的最终分析

    python初学者,往往因为字符编码的问题而苦恼不已,本人也是阅读了大量的博客,再进行了一定的测试,基本搞清楚了编码问题的前因后果.下面一段代码是在python3.5上的,以它为例进行讲解(请忽略糟糕 ...

  2. 如何彻底的卸载和删除Windows service

    最近遇到很头疼的问题,安装到服务器的Windows Service卸载的时候出错了,结果在服务列表中就一直驻留,并且系统进程一直在运行,怎么都杀不掉. 最后终于找到办法了: 1.常规做法,批处理命令卸 ...

  3. EncryptTransform

    internal class EncryptTransform { //private const int c_MaxLengthOf_IV_DES = 4; //private const int ...

  4. 使用HtmlAgilityPack爬取网站信息并存储到mysql

    前言:打算做一个药材价格查询的功能,但刚开始一点数据都没有靠自己找信息录入的话很麻烦的,所以只有先到其它网站抓取存到数据库再开始做这个了. HtmlAgilityPack在c#里应该很多人用吧,简单又 ...

  5. 可以调整gif动画图片尺寸的很实用的php类

    类的使用demo: <?php //http://www.cnblogs.com/roucheng/ require_once "roucheng.php"; $gr = n ...

  6. 重新想象 Windows 8 Store Apps (45) - 多线程之异步编程: IAsyncAction, IAsyncOperation, IAsyncActionWithProgress, IAsyncOperationWithProgress

    [源码下载] 重新想象 Windows 8 Store Apps (45) - 多线程之异步编程: IAsyncAction, IAsyncOperation, IAsyncActionWithPro ...

  7. 用Perl编写Apache模块续 - SVNAuth

    目标:以整合各类项目管理系统中的用户体系及权限体系为目标,实现SVN的集成式动态鉴权 支持平台:usvn.禅道等 - 开发中,本文仅对前期的探索工作做点整理 开发环境: Windows.XAMPP 1 ...

  8. ahjesus mongodb指定到数据盘连接不上的解决方案

    关于配置路径指定到数据盘会出现连接不上的情况 我发现是因为数据盘权限不足引起的,目前没找到治本的方法 有个治标的方法就是设置数据盘的权限和用户 sudo chmod 777 * -R  /path/d ...

  9. 论元数据和API管理工具

    公司里面的很多部门都在广泛的采用元数据管理,也采用了公司内部开发的元数据管理工具,有些部门的实施效果一直非常好,而有些部门的效果则差强人意.这个问题,其实和软件系统开发完成进入维护阶段后成本居高不下的 ...

  10. Javascript－回调函数浅谈

    回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在特定 ...