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. 文件和目录：access函数

    access函数是按照实际用户ID和实际组ID进行访问权限测试的: #include <unistd.h> int access( const char *pathname, int mo ...

  2. [ACM] hdu 1025 Constructing Roads In JGShining's Kingdom （最长递增子序列，lower_bound使用）

    Constructing Roads In JGShining's Kingdom Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65 ...

  3. MVC项目创建与项目结构介绍

    一.创建MVC项目 打开VS202,点击:文件—>新建—>项目—>Web—>Asp.Net MVC 4 Web应用程序 填好项目名称.解决方案名称和文件存放位置,然后点击确定, ...

  4. 基于OpenCv的人脸检测、识别系统学习制作笔记之二

    在网上找到了一个博客,里面有大量内容适合初学者接触和了解人脸检测的博文,正好符合我目前的学习方面,故将链接放上来,后续将分类原博客的博文并加上学习笔记. 传送门: http://blog.sina.c ...

  5. httpd 虚拟主机建立之访问机制及其日志定义

    注:关闭防火墙,selinux VirtualHost定义: 基于IP地址VirtualHost: 编辑httpd.conf文件: #DocumentRoot "/web/html" ...

  6. Exception in thread "http-apr-8080-exec-2"

    设置了catalina.bat.catalina.sh都不起作用MyEclipse中选择菜单Windows---preferences---MyEclipse---Servers---Tomcat-- ...

  7. log-malloc2 0.2.4 发布

    log-malloc2 0.2.4 发布了,该版本修复了日志格式输出的 bug. og-malloc2 是一个 malloc 日志预加载库,用于检测内存泄漏问题.

  8. [Hyper-V]在Windows 8.1 操作系统中启用Hyper-V功能

    描述: 如何在Windows 8.1 操作中启用Hyper-V功能 实现步骤: 1,安装Hyper-V 1 打开Control Panel,点击Progress 2 点击Turn Windows fe ...

  9. 带你看懂Dictionary的内部实现

    了解Dictionary的开发人员都了解,和List相比,字典添加会慢,但是查找会比较快,那么Dictionary是如何实现的呢? Dictionary的构造 下面的代码我看看Dictionary在构 ...

  10. webApp 阅读器项目实践

    这是一个webApp 阅读器的项目,是慕课网的老师讲授的一个实战,先给出项目源码在GitHub的地址:https://github.com/yulifromchina/MobileWebReader. ...