placeholder 是 html5 新增加的属性，主要提供一种提示（hint），用于描述输入域所期待的值。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。placeholder 属性适用于以下类型的 input 标签：text, search, url, telephone, email 以及 password。

我们先看下在谷歌浏览器中的效果，如图所示：

获得焦点时：

输入字段：

因为是 html5 属性，自然低版本的浏览器比如 ie6-8 不兼容。下面就介绍下如何在低版本浏览器中显示以上效果，话不多说直接上代码。

html：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <meta name="renderer" content="webkit"/>

    <meta name="keywords" content=""/>

    <meta name="description" content=""/>

    <title>基于 jquery 实现 ie 浏览器兼容 placeholder 效果</title>

    <style>

    *{margin:0;padding:0;}

    .txt{position:relative;font-size:12px;margin:10px;}

    .txt input{border:1px solid #ccc;height:30px;line-height:30px;padding:0 10px;width:200px;}

    .txt .txt-tip{color:#999;position:absolute;left:10px;top:0;height:32px;line-height:34px;}

    </style>

</head>

<body>

    <div class="txt">

        <input type="text" value=""/>

    </div>

</body>

</html>

<script src="js/jquery.min.js"></script>

<script src="js/placeholder.js"></script>

<script>

$(function(){

    var $input = $('.txt input');

    initPlaceholder($input, '请输入内容', 'txt-tip');

});

</script>

placeholder.js：

function initPlaceholder($input, msg, classname){

    var isIE = !!window.ActiveXObject || 'ActiveXObject' in window;

    var isPlaceholder = 'placeholder' in document.createElement('input');

    if(isPlaceholder && !isIE){

        $input.attr('placeholder', msg);

    }else{

        var $tip = $('<span class="' + classname + '">' + msg + '</span>');

        $input.after($tip);

        $.data($input[0], 'tip', $tip);

        if($input.val() != ''){

            hidePHTip($input);

        }

        dealPHTip($input, $tip);

    }

}

function hidePHTip($input){

    var $tip = $.data($input[0], 'tip');

    if($tip){

        $tip.hide();

    }

}

function dealPHTip($input, $tip){

    var _deal = function(){

        var val = $input.val();

        if(val == ''){

            $tip.show();

        }else{

            $tip.hide();

        }

    };

    $tip.click(function(){

        $input.focus();

    });

    $input.on('input propertychange', function(){

        clearTimeout(timeout);

        var timeout = setTimeout(_deal, 0);

    });

}

实现原理：首先过滤下浏览器，非 ie 浏览器并且支持 placeholder 属性就用 placeholder，ie 浏览器则用 span 代替 placeholder 文本内容，通过样式定位在 input 上方，同时监听 input 输入框值的变化来判断显示或隐藏 span。

我们来看下 ie6 浏览器中的效果：

获得焦点时：

输入字段：

可以看到和谷歌浏览器的效果是一致的，唯一不足的就是文字没有居中，可以通过 css 进行修改。

【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果的更多相关文章

  1. jQuery实现ie浏览器兼容placeholder效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 跨浏览器实现placeholder效果的jQuery插件

    曾经遇到这样一个问题,处理IE8密码框placeholder属性兼容性.几经周折,这个方案是可以解决问题的. 1.jsp页面引入js插件 <script type="text/java ...

  3. 基于jQuery的让非HTML5浏览器支持placeholder属性的代码（转）

    效果图:http://code.google.com/p/jquery-placeholder-js/ 演示代码:http://demo.jb51.net/js/2011/jqueryplacehol ...

  4. jQuery 两种方法实现IE10以下浏览器的placeholder效果

    /* ** jQuery版本:jQuery-1.8.3.min.js ** 测试的浏览器:IE8,IETester下的IE6-IE9** Author:博客园小dee */ placeholder是H ...

  5. 低版本IE内核浏览器兼容placeholder属性解决办法

    最简便的一个方法,通过js实现. <input type="text" name="username" id="username" v ...

  6. ie兼容placeholder效果

    转载:http://www.jb51.net/article/56244.htm placeholder是HTML5<input>的属性之一,在不同的浏览器( 支持HTML5的现代浏览器 ...

  7. 兼容IE浏览器的placeholder【超不错】

    jQuery EnPlaceholder plug (兼容IE浏览器的placeholder)使用 >>>>>>>>>>>>&g ...

  8. 基于jQuery 常用WEB控件收集

    Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...

  9. 基于Jquery的进度条插件(实用)

    Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载    在线演示   Percentage Loader 一款轻量的 jQuery 进 ...

随机推荐

  1. C++字符串常量

    C++字符串常量 当一个字符串常量出现于表达式中时,它的值是个指针常量.编译器把这个指定字符的一份copy存储在内存的某个位置(全局区),并存储一个指向第一个字符的指针. #include <i ...

  2. 导入module

    1.http://blog.csdn.net/cryssdut/article/details/50357876 2.直接把lib复制黏贴到项目里,无法直接用:需要在 settings.gradle中 ...

  3. FileOutputStream保存文件

    //保存文件,根据传入的路径,存放在SD卡目录下public boolean saveToPath(String title, String pageName) { Bitmap b = getCha ...

  4. C++ 添加库

    三步走:(第三步总忘) 1.项目属性页的C/C++->常规->附加包含目录指向 2.链接器(Linker)->常规(general)->附加库目录指向 3.链接器->输入 ...

  5. Linux启动ftp服务器530 Permission denied解决方法(已试，行)

    Linux启动ftp服务器530 Permission denied解决方法重新在虚拟机下安装了linux.现在我想启动linux自带的ftp服务器:#service  vsftpd  start . ...

  6. quartznet笔记

    http://sourceforge.net/projects/quartznet/files/quartznet/

  7. 设计模式之美：Chain of Responsibility（职责链）

    索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):实现后继者链. 意图 使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系. 将这些对象连成一条链,并沿着这条 ...

  8. ASP.NET MVC简单编程之(二)经典路由篇

    话题:请求从路由开始 在实际的ASP.NET MVC开发中,URL访问规则----路由的定义是非常重要的.因为任何一个请求都离不开路由.理解它,我们将能理解MVC处理请求的整个过程,灵活地定义系统各种 ...

  9. Spring - 基于注解的组件扫描

    关于Spring的书籍都会花很大篇幅来讲解Spring如何注入各种bean的问题,非常令人头疼,自己在工作中还从来没有用到过. 所以就要跳过那些篇章,直接学习基于注解的组件扫描. 发现spring2是 ...

  10. 连接数据库——模拟ATM机查、存、取、开户功能

    1.界面:包含开户.查询.存款.取款.功能 package com.bank.test; /** * * @author Administrator *界面类 */ public class Jiem ...