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. Text input(文本输入框)

    Text input(文本输入框)是用来获得用户输入的绝佳方式. 你可以用如下方法创建: <input type="text"> 注意,input元素是自关闭的.

  2. [转]框架模式 MVC 在Android中的使用

    算来学习Android开发已有2年的历史了,在这2年的学习当中,基本掌握了Android的基础知识.越到后面的学习越感觉困难,一来是自认为android没啥可学的了(自认为的,其实还有很多知识科学), ...

  3. JQuery学习(表单对象属性)---checked

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  4. 使用NHibernate（7）-- 一对一 && 一对多 && 多对多

    1, 一对一. 对于数据量比较大的时候,考虑查询的性能,肯能会把一个对象的属性分到两个表中存放:比如用户和用户资料,经常使用的一般是Id和用户名,用户资料(学校,籍贯等)是不经常被查询的,所以就会分成 ...

  5. WinDbg 命令三部曲：（三）WinDbg SOSEX 扩展命令手册

    本文为 Dennis Gao 原创技术文章,发表于博客园博客,未经作者本人允许禁止任何形式的转载. 系列博文 <WinDbg 命令三部曲:(一)WinDbg 命令手册> <WinDb ...

  6. ibatis + log4net 配置注意事项

    一 在web.config或app.config中配置 <configuration> <configSections> <sectionGroup name=" ...

  7. ichat在线客服jQuery插件(可能是历史上最灵活的)

    ichat是一款开源免费在线客服jQuery插件,通过该插件,您可以自由的定制属于自己的在线客服代码. ichat充分吸收传统在线客服插件的优点,并加上自身的独特设计,使得ichat可定制性异常强大. ...

  8. 使用window2003安装邮件服务器最新实际操作记录

    关于使用windows 2003自带的服务组件来安装简单的pop3 协议邮件服务器网上教程很多,可以搜索出来,就是安装IIS选中smtp和添加window是组件的应用程序服务器,这点这里不多说. 安装 ...

  9. C/C++文件操作2

    一.流式文件操作 这种方式的文件操作有一个重要的结构FILE,FILE在stdio.h中定义如下: typedef struct { int level; /* fill/empty level of ...

  10. Emmet语法大全手册

    这是基于官方手册整理制作的,因为那个手册网页打开很慢,所以就整理在这里了.以备不时之需. Syntax   Child: > nav>ul>li <nav> <ul ...