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. Cocos2d-x 2.2.3 Android配置

    今天总结出来的部署流程,已经成功把自己的项目编译到android真机上.省去了安装ndk等步骤 环境: win7 64位 1.导入项目到eclipse 2.导入libcocos2dx 样例:C:\co ...

  2. MVC中的Views下面的视图放到Views文件夹外

    实战:把ASP.NET MVC中的Views下面的视图放到Views文件夹外   园子里写的文章的都是把控制器从传统的项目中的Controllers拿出来单独放,但很少几乎没有把视图从Views拿出去 ...

  3. （二）给IE6-IE9中的input添加HTML5新属性-placeholder

    同样是最近遇到的一个小问题.因为IE9以下input是不支持placeholder属性的.在网上找到了解决方案,果断带走.正如鲁迅先生所说的‘拿来主义’:运用脑髓,放出眼光,自己来拿!感谢.借花献佛在 ...

  4. 活锁（livelock）

    活锁(livelock) 活锁指的是任务或者执行者没有被阻塞,由于某些条件没有满足,导致一直重复尝试,失败,尝试,失败. 活锁和死锁的区别在于,处于活锁的实体是在不断的改变状态,所谓的“活”, 而处于 ...

  5. 一个IT学生的personal statement

    前一段时间的英语老师要求我们写一个自己的personal statement,我相信,作为一个IT学生,人很多personal statement应该都了如指掌.进一步的研究是必要的出国留学,当然,也 ...

  6. BZOJ 1015 JSOI2008 星球大战 starwar 并检查集合

    标题效果:给定一个无向图.联通谋求块的数目,以及k一个点的破坏后每次:联通,块的数目 侧面和摧毁的地步全记录,我们可以做相反的. 需要注意的是该点不能算作破坏联通块 #include<cstdi ...

  7. 如何解决KEIL 5 编KEIL4同RTX系统的project解

    1.我个人KEIL5与KEIL4对照 相较于KEIL 5 的"华丽".笔者还是喜欢KEIL4的"内敛",主要也还是习惯了.懒得换了.由于工作的  原      ...

  8. thinkphp学习笔记10—看不懂的路由规则

    原文:thinkphp学习笔记10-看不懂的路由规则 路由这部分貌似在实际工作中没有怎么设计过,只是在用默认的设置,在手册里面看到部分,艰涩难懂. 1.路由定义 要使用路由功能需要支持PATH_INF ...

  9. oracle 数据库安装环境，需要大汇总

     Oracle Database (RDBMS) on Unix AIX,HP-UX,Linux,Mac OS X,Solaris,Tru64 Unix Operating Systems Ins ...

  10. QtQuick桌面应用程序开发指导 3)达到UI而功能_B 4)动态管理Note物_A

    3.2 把Page Item和Marker Item绑定 之前我们实现了PagePanel组件, 使用了三个state来切换Page组件的opacity属性; 这一步我们会使用Marker和Marke ...