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. Win7如何解决精简版的迅雷7无法运行

    网上下载msvcp71.dll和msvcr71.dll把文件放到System32目录下即可   http://www.baidu.com/s?wd=msvcp71.dll&ie=utf-8&a ...

  2. apache TIME_WAIT解决办法

    最近发现apache与负载均衡器的的连接数过多,而且大部分都是TIME_WAIT,调整apache2.conf后也没效果,最后百度到如下解决方案 通过调整内核参数解决 vi /etc/sysctl.c ...

  3. VueJS路由

    Vue.js 路由 本章节我们将为大家介绍 Vue.js 路由. Vue.js 路由允许我们通过不同的 URL 访问不同的内容. 通过 Vue.js 可以实现多视图的单页Web应用(single pa ...

  4. Android VS IOS

    时间: IOS:var d = new Date("2018-04-19 14:23:00".replace(/-/g, "/")); (d = new Dat ...

  5. Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  6. ckdeitor的使用方法

    CKEditor 3 JavaScript API Documentation : http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.con ...

  7. Oracle -- 连接每行的内容

    select wm_concat(message) from (        select rownum no, 'Case ''' || code || '''' || '' || chr(10) ...

  8. programming review (c++): (3)graph, binary search

    I.graph #include <iostream> #include <vector> using namespace std; vector<vector<, ...

  9. 如何在linux下解压缩rar格式的文件压缩包

    ##########################################################如何在linux下解压缩rar格式的文件压缩包#date:2014年2月15日22: ...

  10. onscreen and offscreen

    本文来自stackoverflow一位网友的解答,感觉非常不错就摘录了. --------------------------------------------------------------- ...