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. IE6兼容透明JS

    <!--兼容png格式图片--> <!--[]> <script type="text/javascript" src="Js/DD_bel ...

  2. JAVA+HTML

    1.采用轻量级 JApplet . import java.awt.*; import javax.swing.JApplet; public class test extends JApplet{ ...

  3. delphi中获取调用堆栈信息

    异常堆栈有利于分析程序的错误,Delphi的Exception有StackTrace属性,但是值为空,因为StackTrace的信息收集Delphi委托给了第三方组件来完成,真是脑子有毛病! 借助于m ...

  4. python chardet简单应用

    python的字符串编码识别模块(第三方库): 官方地址: http://pypi.python.org/pypi/chardet   import chardet import urllib   # ...

  5. 【基础知识】.Net基础加强06天

    一. 垃圾回收 1. 垃圾回收的目的:提高内存的利用效率. 2. 垃圾回收器: 只回收托管堆中的内存资源,不回收其他资源(数据库连接.文件句柄.网络端口等): 3. 什么时候垃圾回收? a) 当对象没 ...

  6. C#函数式编程之缓存技术

    缓存技术 该节我们将分成两部分来讲解,第一部分为预计算,第二部分则为缓存.缓存这个技术对应从事开发的人员来说是非常熟悉的,从页面缓存到数据库缓存无处不在,而其最重要的特点就是在第一次查询后将数据缓存, ...

  7. SQL 注入

    我们的团队项目中有课程名称输入框,其中的内容会拼接到类sql查询语句中. 所以可能会产生类sql注入的问题,我们团队采用了利用正则表达式判断输入内容的形式来规避这类注入. 下面简单介绍一下sql注入 ...

  8. Asp.NET MVC 拍卖网站，拆解【2】 Asp.NET MVC章回，第（1）节

    时间和篇幅所限,MVC不会介绍基本的建站过程,请参照博客园技术专题文章传送门  英语足够好的请直接去微asp.net 官网 传送门(强烈推荐,尤其是想使用最新技术的时候更应该直接去官网),本文主要介绍 ...

  9. UML建模语言入门 -- 用例视图详解 用例视图建模实战

    . 作者 :万境绝尘  转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/18964835 . 一. 用例视图概述 用例视图表述哪些 ...

  10. SignalR 简单示例

    一.什么是 SignalR ASP.NET SignalR is a library for ASP.NET developers that simplifies the process of add ...