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. validform.js使用方法

    表单验证之validform.js使用方法 一.validform有什么用? 网页上有大量的input需要你进行验证的时候,如果是弹窗的话,需要不停地判断,如果为空,弹窗.如果不是数字,弹窗. 所以要 ...

  2. Jquery 插件初学习

    参考文章:插件开发精品教程,让你的jQuery提升一个台阶 刚刚学了一下jquery的插件插件开发,写个demo记录.练习一下.毕竟,输出才是最好的学习. 这个也不过是最基础的一个插件写法,只是,自己 ...

  3. oracle11g的dmp文件导入oracle10g当误差：头验证失败---解决

    原创作品,离 "深蓝的blog" 博客.欢迎转载,转载时请务必注明出处.否则追究版权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanlong/ ...

  4. Hibernate各保存方法之间的差 (save,persist,update,saveOrUpdte,merge,flush,lock)等一下

    hibernate保存  hibernate要保存的目的是提供一个方法,多.它们之间有许多不同之处,点击此处详细说明.使得差: 一.预赛: 在所有.阐释.供hibernate,,transient.p ...

  5. android登录界面

    在网上在到一个登录界面感觉挺不错的,给大家分享一下~先看效果图: 这个Demo除了按钮.小猫和Logo是图片素材之外,其余的UI都是通过代码实现的. 一.背景 背景蓝色渐变,是通过一个xml文件来设置 ...

  6. Ubuntu环境下的Redis 配置与C++使用入门

      Redis是一个高性能的key-value数据库. Redisedis的出现,非常大程度补偿了memcached这类key/value存储的不足,在部分场合能够对关系数据库起到非常好的补充作用.它 ...

  7. HDU 2616 Kill the monster (暴力搜索 || 终极全阵列暴力)

    主题链接:HDU 2616 Kill the monster 意甲冠军:有N技能比赛HP有M怪物,技能(A,M),能伤害为A.当怪兽HP<=M时伤害为2*A. 求打死怪兽(HP<=0)用的 ...

  8. C#命令模式-设计模式学习

    命令模式(Command Pattern) 概述   在软件系统中,“行为请求者”与“行为实现者”通常呈现一种“紧耦合”.但在某些场合,比如要对行为进行“记录.撤销/重做.事务”等处理,这种无法抵御变 ...

  9. BZOJ 1355 Baltic2009 Radio Transmission KMP算法

    标题效果:给定一个字符串,求最小周期节(不能整除) 示例Hint这是错误的忽略了就好了 环路部分应该是cab 这个称号充分利用KMP在next自然阵列,那是,n-next[n]它表示一个循环节 POJ ...

  10. js中从blob提取二进制

    文章结构: 一.所遇到的问题 二.解决方法 一. 服务器端通过websocket向浏览器端传输图片(二进制),需要根据不同的图片把图片显示在不同的位置,可行的一个方法是先把图片转化成二进制数组,再把二 ...