placeholder 属性提供可描述输入字段预期值的提示信息（hint）。

该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。

placeholder 属性是 HTML5 中的新属性。

由于它是html5新增的属性，所以在IE低版本中并不被支持，但是为了兼容IE，我们可以实现在文本框上面浮动一个span标签模拟html5的功能！代码实现如下

<!DOCTYPE HTML>

<html lang="en">

<head>

    <meta charset="utf-8"/>

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

    <title>表单提示</title>

    <body>

    <div class="" style="width:100px;height:30px;">

       <input type="text" name="" id="ss" style="width:100px;height:30px;"/>

     </div>

    </body>

</html>

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

<script>

var Utils = {

    isIe: !!window.ActiveXObject || 'ActiveXObject' in window,

    isPlaceholder: 'placeholder' in document.createElement('input'),

    initPlaceholder: function($input,msg,json){

        if(this.isPlaceholder && !this.isIe){

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

        }else{

            var obj = eval(json);

            if(!($input.parent().css("position") == 'relative' || $input.parent().css("position") == 'absolute')){

               $input.parent().css("position","relative");//父元素设置相对定位

            }

            $input.removeAttr('placeholder');

            var $tip = $('<span></span>');

            if($input.is(':hidden')){

                $tip.hide();

            }

            $tip.css("position","absolute");

            $tip.css("left",obj.left+'px');

            $tip.css("top",obj.top+'px');

            $tip.css("color",obj.color);

            $tip.text(msg);

            $input.after($tip);

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

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

                this.hidePHTip($input);

            }

            this.dealPHTip($input,$tip);

        }

    },

    hidePHTip: function($input){

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

        if($tip){

            $tip.hide();

        }

    },

    dealPHTip: function($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);

        });

    }

}

 Utils.initPlaceholder($('#ss'),'仅限100字',{top:'10',left:'10',color:'#f00'});

</script>

提示插件！二次优化

var Utils = {

    isIe: !!window.ActiveXObject || 'ActiveXObject' in window,

    isPlaceholder: 'placeholder' in document.createElement('input'),

    initPlaceholder: function($input,msg,json){

        if(this.isPlaceholder && !this.isIe){

            return;

        }else{

            var obj = eval(json);

            if(!($input.parent().css("position") == 'relative' || $input.parent().css("position") == 'absolute')){

               $input.parent().css("position","relative");

            }

            var _h = $input.height();

            alert(_h);

            var _w = $input.width();

            var $tip = $('<span></span>');

            if($input.is(':hidden')){

                $tip.hide();

            }

            $tip.css({

                'position':'absolute',

                'left':'5px',

                'top':(_h-6)/2 + 'px',

                'font-size':'12px',

                'color':obj.color

            });

            $tip.text(msg);

            $input.after($tip);

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

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

                this.hidePHTip($input);

            }

            this.dealPHTip($input,$tip);

        }

    },

    hidePHTip: function($input){

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

        if($tip){

            $tip.hide();

        }

    },

    dealPHTip: function($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);

        });

    },

    init: function(json){

        $('input[placeholder]').each(function(i){

            Utils.initPlaceholder($(this),$(this).attr('placeholder'),json);

        });

    },

    initHasPar:function(parent,json){

        parent.find('input[placeholder]').each(function(i){

            Utils.initPlaceholder($(this),$(this).attr('placeholder'),json);

        });

    }

}

Utils.init({color:'#ccc'});

//Utils.initHasPar({color:'#ccc'});

HTML5表单提示placeholder属性兼容IE的更多相关文章

  1. HTML5 表单元素和属性

    HTML5 表单元素和属性学习 版权声明:未经博主授权,内容严禁转载 ! 表单元素简介 无论实现提交功能还是展示页面功能,表单在HTML中的作用都十分重要. 在其他版本的HTML中,表单能够包含的元素 ...

  2. [原创]Web前端开发——让ie 7 8支持表单的placeholder属性

    今天在写页面的时候,测试低版本浏览器时,发现input写的placeholder显示的是空白,所以特意写了一个普遍试用的方法来让低版本浏览器支持这个属性. 博主建了一个技术共享qq群:,因为目前人数还 ...

  3. HTML5初步——新的表单元素和属性

    HTML5初步--新的表单元素和属性 HTML5初步--新的表单元素和属性 <!DOCTYPE html> <html> <head> <meta chars ...

  4. HTML5 表单新增属性

    1. 表单内元素的form属性 在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了 <form id=&quo ...

  5. 疯狂的表单-html5新增表单元素和属性

    疯狂的表单 2015/11/27 16:44:07 从三方面来介绍html5表单的新特性 表单结构更灵活 要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只 ...

  6. 从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值

    一.html5新增标签 1.结构性标签 header 定义网页的头部 nav 定义网页的导航 footer 定义网页的底部 section 定义网页的某个区域 article 定义网页中的一篇文章 a ...

  7. HTML5表单新增元素与属性

    form属性 在html4中,表单的从属元素必须写在表单内部,而在HTML5中,可以把他们书写在任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了. ...

  8. HTML5: HTML5 表单属性

    ylbtech-HTML5: HTML5 表单属性 1.返回顶部 1. HTML5 表单属性 HTML5 新的表单属性 HTML5 的 <form> 和 <input>标签添加 ...

  9. HTML5 学习08——Input 类型、表单元素及属性

    注意:并不是所有的主流浏览器都支持新的input类型,不过您已经可以在所有主流的浏览器中使用它们了.即使不被支持,仍然可以显示为常规的文本域. (1)Input 类型: color color 类型: ...

随机推荐

  1. backup mysql for xtrabackup with xbstream and lz4

    极品暂时mysql加入一个实例,采用xtrabackup最简单的速度. 在现有数据节点上: /home/work/app/xtrabackup-2.2.3/innobackupex --ibbacku ...

  2. 朝花夕拾-4-shell

    引言 shell,我们常常会用到,以其强大的功能,会帮助我们解决非常多棘手的问题.近期遇到一个问题,要跑非常多case,假设串行的执行,须要非常久.能不能让他们并行起来,但又不能全部case都并行执行 ...

  3. NSIS：检查某注册表键是否存在

    原文NSIS:检查某注册表键是否存在 ;定义注册表主键!define HKEY_CLASSES_ROOT           0x80000000!define HKEY_CURRENT_USER   ...

  4. The Swift Programming Language中国完整版

    近来的ios的swift语言似乎火了.我没有objectc基金会,但在此之前有c随着java在...的基础上.从几天开始学习ios的swift语言,晚发表在博客形式.下面是英文版本翻译swif图书.还 ...

  5. 深入理解Android View(转)

    做android其实也有一段时间了,我们每个人都会碰到一些这样或那样的问题,碰到问题了就拼命百度,可是发现,我们解决问题的能力并没有提升很多,所以我才有想总结一下我项目中所用过的相关知识,并了解一下A ...

  6. 国产与第三方库FFmpeg SDK

    一个.编译并安装第三方库 1. libfaac # tar -zxvf faac-1.28.tar.gz # cd faac-1.28 # ./configure --prefix=/opt/YOUR ...

  7. java数据结构系列之——数组（1）

    import javax.management.RuntimeErrorException; public class MyArray { private long array[]; private ...

  8. Java 反射 想

    所谓反射.是指在执行时状态中,获取类中的属性和方法.以及调用当中的方法的一种机制. 这样的机制的作用在于获取执行时才知道的类(Class)及当中的属性(Field).方法(Method)以及调用当中的 ...

  9. Lampda或Linq中的SqlFunctions.StringConvert()

    要使用 Lampda或Linq中的SqlFunctions.StringConvert(), 需要引用命名空间using System.Data.Objects.SqlClient, 该函数可进行模拟 ...

  10. Yeoman generators 创建 ASP.NET 应用程序

    Yeoman generators 创建 ASP.NET 应用程序 上一篇:<Windows 搭建 .NET 跨平台环境并运行应用程序> 阅读目录: Install Node.js Ins ...