[干货]兼容HTML5的Placeholder属性-更新版v0.10102013

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);
?

时间: 2024-11-01 09:25:37

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

ie兼容html5中placeholder属性

<!doctype html><html><head><meta charset="utf-8"><title>placeholder</title> <script id="jquery_183" type="text/javascript" class="library" src="C:/Users/Administrator/Desk

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

界面UI推荐 jquery html5 实现placeholder兼容password  IE6 html5的placeholder属性(IE如何兼容placeholder属性) 2013-01-05 10:26:06|  分类: web学习 |  标签:html  js  ie  placeholder  |举报 |字号大中小 订阅 placeholder属性,IE对其的支持表示无奈,firefox.google chrome表示毫无压力. HTML5对Web Form做了许多增强,比如inp

解决HTML5中placeholder属性兼容性的JQuery插件

//调用方法 $(function () {   $(".pHolder").jason(); }); //HTML代码 <input type="text" class="pHolder" placeholder="请输入姓名" /> //jquery插件 ($.fn.jason = function(a) {    var b = {        focus: "black",      

HTML5的placeholder 属性的向下兼容

HTML5的placeholder 属性的向下兼容 更多 0 placeholder属性是HTML5新添加的属性,当input或者textarea设置了该属性后,该值的内容将作为灰色提示显示在文本框中,当文本框获得焦点时,提示文字消失,placeholder可作为输入框的提示文案,如图所示登录框: 系统登录 其实以前是通过给input|textarea设置value值来实现类似功能的,当input|textarea获得焦点时,将其value设置为空.但是有一个问题是对于密码输入框: <input

Html5的placeholder属性(IE兼容)

HTML5对Web Form做了很多增强,比方input新增的type类型.Form Validation等. Placeholder是HTML5新增的还有一个属性,当input或者textarea设置了该属性后.该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失.曾经要实现这效果都是用JavaScript来控制才干实现 , firefox.google chrome等表示对其支持 , 只有IE存在违和感啊! 比如:  <input id="t1" type

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

placeholder属性,IE对其的支持表示无奈,firefox.google chrome表示毫无压力. HTML5对Web Form做了许多增强,比如input新增的type类型.Form Validation等.Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失.以前要实现这效果都是用JavaScript来控制才能实现: <input id="t1" 

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

今天在群里看到群友问了一个这样的问题,就是如何更改placeholder属性中文字的颜色,以前用过这属性,却是没更改过颜色,于是便试了试,中途遇到些问题,查找资料后特来总结一下. 熟悉HTML5的人应该都知道,placeholder这个属性是HTML5中新增的属性,该属性的作用是规定可描述输入字段预期值的简短的提示信息,该提示会在用户输入之前显示在输入字段中,会在用户输入字段后消失,有些浏览器则是获得焦点后该提示便消失(如Safari.IE) 适用范围:placeholder 属性适用于下面的

让IE下支持Html5的placeholder属性

HTML5对Web Form做了许多增强,比如input新增的type类型.Form Validation等. Placeholder 是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文 字消失.以前要实现这效果都是用JavaScript来控制才能实现 , firefox.google chrome等表示对其支持 , 唯独IE存在违和感啊! 例如: <input id="t1" type

HTML5的placeholder属性如何实现换行

在HTML5中,placeholder是一个非常有用的属性,当控件中无内容时可以代替UI控件的提示功能,而不需要写额外的代码.但如果有一个textarea控件,我们需要多行的文本提示信息时,使用”\n”, ““均不能实现换行功能:后来在一次无意中的操作,实现了placeholder的换行功能. placeholder的属性值本身包含格式信息,但不能转义字符(如’\n’, ‘\t’),在编辑器中可直接使用回车实现placeholder的换行功能.如:<textarea placeholder=&quo