HTML5对Web Form做了许多增强,比如input新增的type类型、Form Validation等。Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失。

这里提供了Placeholder的兼容方法,更新如下:

1.将方法修改为node原生对象的继承对象
2.兼容input类型为password的文本框
3.提供样式名称作为参数,可以灵活设置样式,修正样式设置一处问题
4.解决了事件监听兼容性问题
5.提供jquery插件版

这里提供jquery的片段,详细说明、在线演示见:
http://levi.cg.am/?p=3171
​1. [代码]先来看看调用方法:     
// 特定某一个文本对象
$('#tmp').PlaceHolder('abc');
  
// 设定所有文本对象
$('input').PlaceHolder('abc');
  
// 一劳永逸调用方法
$('[placeholder]').PlaceHolder('abc');
2. [代码]js方法如下:    
;(function($) {
    $.fn.PlaceHolder = function(className) {
        var _set = function($em, opt) {
            for (i in opt) {
                switch(i) {
                    case 'value': $em.val(opt[i]); break;
                    case 'class':
                        if (opt[i].length) {
                            $em.toggleClass(opt[i]);
                        }
                        break;
                    default: $em.attr(i, opt[i]);
                }
            }
        };
          
        if ('placeholder' in $('<input />')[0]) {
            return this;
        }
          
        return this.each(function() {
            var $this = $(this), 
                init = {
                    'type': $this.attr('type'),
                    'placeholder': $this.attr('placeholder')
                };http://www.huiyi8.com/huawen/​
              
            $this.bind({花纹
                'init': function(){
                    _set($(this), {
                        'type': init.type,
                        'class': className ? className : '',
                        'value': ''
                    });
                },
                  
                'opts': function() {
                    _set($(this), {
                        'type': 'text',
                        'class': className ? className : '',
                        'value': init.placeholder
                    });
                },
                  
                'focus': function() {
                    var $this = $(this);
                    if ($this.val() == init.placeholder) {
                        $this.trigger('init');
                    }
                },
                  
                'blur': function() {
                    var $this = $(this);
                    if ($this.val() == '') {
                        $this.trigger('opts');
                    }
                }
            });
              
            if (init.placeholder && $this[0].value != undefined) {
                $this.trigger('blur');
            }
        });
    };
})(jQuery);

[干货]兼容HTML5的Placeholder属性-更新版v0.10102013的更多相关文章

  1. html5的placeholder属性(IE如何兼容placeholder属性)

    界面UI推荐 jquery html5 实现placeholder兼容password  IE6 html5的placeholder属性(IE如何兼容placeholder属性) 2013-01-05 ...

  2. 【工作笔记五】html5的placeholder属性(IE如何兼容placeholder属性)

    placeholder属性,IE对其的支持表示无奈,firefox.google chrome表示毫无压力. HTML5对Web Form做了许多增强,比如input新增的type类型.Form Va ...

  3. Html5的placeholder属性(IE兼容)

    HTML5对Web Form做了很多增强,比方input新增的type类型.Form Validation等. Placeholder是HTML5新增的还有一个属性,当input或者textarea设 ...

  4. 让IE下支持Html5的placeholder属性

    HTML5对Web Form做了许多增强,比如input新增的type类型.Form Validation等. Placeholder 是HTML5新增的另一个属性,当input或者textarea设 ...

  5. HTML5之placeholder属性以及如何更改placeholder属性中文字颜色

    今天在群里看到群友问了一个这样的问题,就是如何更改placeholder属性中文字的颜色,以前用过这属性,却是没更改过颜色,于是便试了试,中途遇到些问题,查找资料后特来总结一下. 熟悉HTML5的人应 ...

  6. 转: HTML5之placeholder属性以及如何更改placeholder属性中文字颜色

    今天在群里看到群友问了一个这样的问题,就是如何更改placeholder属性中文字的颜色,以前用过这属性,却是没更改过颜色,于是便试了试,中途遇到些问题,查找资料后特来总结一下. 熟悉HTML5的人应 ...

  7. Html5 input placeholder 属性字体颜色修改。

    这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识,需要的朋友可以参考下     Chrome支持input=[type=text]占位文本属性,但下列CSS样式 ...

  8. HTML5的placeholder属性如何实现换行

    在HTML5中,placeholder是一个非常有用的属性,当控件中无内容时可以代替UI控件的提示功能,而不需要写额外的代码.但如果有一个textarea控件,我们需要多行的文本提示信息时,使用”\n ...

  9. IE678910不兼容H5的placeholder属性,需要JS解决

    两种方法的思路 一.使用input的value作为显示文本 二.不使用value,添加一个额外的span标签,绝对定位覆盖到input上面. 两种方式各有优缺点,方法一占用了input的value属性 ...

随机推荐

  1. SVN切分支步骤

    1.右键project选择Brankch/Tag 2.选择SVN路径并在改路径下填写project名称 3.选择最新版本号 4.填写必要的凝视备忘,方便日后查看 5.刷新父文件夹文件夹.下载被切出来的 ...

  2. 11-BeautifulSoup库详解

    ---恢复内容开始--- 灵活又方便的网页解析库,处理高效,支持多种解析器. 利用它不用编写正则表达式即可方便地实现网页信息的提取. 这个库有四个主要方法吧,其中xlml是最常用的,他的标签选择器可以 ...

  3. 基于mysql本身的主从复制

    mysql的主从复制在我理解而言就是一个主数据库进行增删改操作的时候会自动将数据写入与之关联的从数据库中.这个从数据库可以是一个也可以是多个.(刚开始理解的时候觉得是同一个数据库服务下的不同的data ...

  4. 吐血整理:PyTorch项目代码与资源列表 | 资源下载

    http://www.sohu.com/a/164171974_741733   本文收集了大量基于 PyTorch 实现的代码链接,其中有适用于深度学习新手的“入门指导系列”,也有适用于老司机的论文 ...

  5. Spark源代码分析之六:Task调度(二)

    话说在<Spark源代码分析之五:Task调度(一)>一文中,我们对Task调度分析到了DriverEndpoint的makeOffers()方法.这种方法针对接收到的ReviveOffe ...

  6. 数据结构:最小生成树--Kruskal算法

    Kruskal算法 Kruskal算法 求解最小生成树的还有一种常见算法是Kruskal算法.它比Prim算法更直观.从直观上看,Kruskal算法的做法是:每次都从剩余边中选取权值最小的,当然,这条 ...

  7. iOS开发 两个内存错误的一般处理方法

    本文转载至 http://blog.sina.com.cn/s/blog_a843a8850101dxlj.html 由于iOS5.0之前没有自动应用计数机制,也没有Java那样的垃圾回收功能.我们都 ...

  8. 【BZOJ1097】[POI2007]旅游景点atr 最短路+状压DP

    [BZOJ1097][POI2007]旅游景点atr Description FGD想从成都去上海旅游.在旅途中他希望经过一些城市并在那里欣赏风景,品尝风味小吃或者做其他的有趣的事情.经过这些城市的顺 ...

  9. 怎么使用Aspose.Cells读取excel 转化为Datatable

    说明:vs2012 asp.net mvc4 c# 使用Aspose.Cells 读取Excel 转化为Datatable 1.HTML前端代码 <%@ Page Language=" ...

  10. 九度OJ 1075:斐波那契数列 (数字特性)

    时间限制:5 秒 内存限制:32 兆 特殊判题:否 提交:3121 解决:1806 题目描述: 编写一个求斐波那契数列的递归函数,输入n值,使用该递归函数,输出如样例输出的斐波那契数列. 输入: 一个 ...