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. [ACM] ZOJ 3816 Generalized Palindromic Number （DFS，暴力枚举）

    Generalized Palindromic Number Time Limit: 2 Seconds      Memory Limit: 65536 KB A number that will ...

  2. 左右v$datafile和v$tempfile中间file#

    v$datafile关于存储在文件中的数据视图的信息,v$tempfile查看存储在一个临时文件中的信息. 有两种观点file#现场,首先来看看官方文件的定义: V$DATAFILE This vie ...

  3. Android Animation 动画Demo（Frame帧动画）

    上一页介绍Animation动画第一:Tween吐温动画. 本文介绍了以下Animation也有动画的形式:Frame帧动画. Frame动画是一系列照片示出的顺序按照一定的处理,和机制,以放电影很阶 ...

  4. 使用JS的FormData对象

    利用FormData对象,你可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 创建一个FormData对象 你可以先创建一个空的F ...

  5. 框架搭建资源 （一） V（视图）C（控制）模式

    pom.xml <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncodin ...

  6. 读取上传的CSV为DataTable

    csv导入文件会把每列的数据用英文逗号分割开来,如果遇到某列中包含英文逗号,则会把该列用英文双引号进行包装. 如果csv文件中某列的数据本身包含英文逗号,应该使用读取字符串的方式进行解析数据,如csv ...

  7. 阅读INI档 - Delphi一片

    程序往往需要读一些用户设置值.如何完成这一过程? B/S程序一般使用XML档.和C/S程序使用INI档. 前篇<C#迁移之callXBFLibrary - 2(调用非托管DLL)>是C#读 ...

  8. crawler_分布式网络爬虫的设计与实现_设计图

    一.集中调度式 二.p2p 三.混合调度式 四.大型集群

  9. 关于C#操作INI文件的总结

    原文:关于C#操作INI文件的总结   INI文件其实是一种具有特定结构的文本文件,它的构成分为三部分,结构如下: [Section1]key 1 = value2key 1 = value2--[S ...

  10. mysql_navicat_快捷键

    快捷键能节省很多时间,之前一直研究oracle,plsql有自定义自动补全, 比如 sf 直接回车 可以出现 select * from 等等(参照http://www.cnblogs.com/cph ...