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. http报错之return error code:401 unauthorized

     http报错之return error code:401 unauthorized 依据HTTP返回码所表示的意思应该是未授权,没有输入账号和password,因此解决方法就直接在HTTP包里面 ...

  2. 三款经常使用IP发包工具介绍

    AntPower 版权全部© 2003 技术文章http://www.antpower.org 第1 页共14 页AntPower-技术文章三款经常使用IP 发包工具介绍小蚁雄心成员郎国军著lgj@q ...

  3. poj3671Dining Cows(DP)

    主题链接: 啊哈哈,点我点我 题意: 给一个仅仅含有1.2的序列,如何变换n次使序列成为一个非递减的序列,而且使n最小. 思路: 这道题的数据范围是50000,则肯定承受不了n方的复杂度.所以 仅仅能 ...

  4. SWI-Prolog

    上个月突然看到Prolog这门语言,它特殊的语法吸引了我,但是经过我一段时间的学习,发现它也不像网络上传说的那样神奇,不过我依然对它很感兴趣,有前辈说Prolog本身并不强大,但是用来作为一门辅助语言 ...

  5. ubuntu14.04(64位置) ADB Not Responding

    今天装了一个很搞笑的比率Ubuntu14.04  还安装Android studio    写app   执行错误: Adb not responding. you can wait more or ...

  6. Oracle 多表关联更新

    drop table course; create table course ( id integer, teacherNo integer, teacherDesc ), teacherName ) ...

  7. listener.ora中PLSExtPro 和ExtProc的作用（转）

    默认安装时,会安装一个PL/SQL外部程序(ExtProc)条目在listener.ora中,是oracle为调用外部程序默认配置的监听,它的名字通常是ExtProc或PLSExtProc,但一般不会 ...

  8. Nyoj Fire Station

    描述A city is served by a number of fire stations. Some residents have complained that the distance fr ...

  9. 转让lua性能executeGlobalFunction

    没有其他的,搞搞cocos2dx的lua文字,话lua这件事情在几年前学过一段时间.还曾对自己c++介面,我已经做了一些小东西.只是时间的流逝,模糊记忆. 拿起点功夫和成本.下面是我的一些经验. co ...

  10. R语言数据分析系列六

    R语言数据分析系列六 -- by comaple.zhang 上一节讲了R语言作图,本节来讲讲当你拿到一个数据集的时候怎样下手分析,数据分析的第一步.探索性数据分析. 统计量,即统计学里面关注的数据集 ...