[干货]兼容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);
[干货]兼容HTML5的Placeholder属性-更新版v0.10102013的更多相关文章
- html5的placeholder属性(IE如何兼容placeholder属性)
界面UI推荐 jquery html5 实现placeholder兼容password IE6 html5的placeholder属性(IE如何兼容placeholder属性) 2013-01-05 ...
- 【工作笔记五】html5的placeholder属性(IE如何兼容placeholder属性)
placeholder属性,IE对其的支持表示无奈,firefox.google chrome表示毫无压力. HTML5对Web Form做了许多增强,比如input新增的type类型.Form Va ...
- Html5的placeholder属性(IE兼容)
HTML5对Web Form做了很多增强,比方input新增的type类型.Form Validation等. Placeholder是HTML5新增的还有一个属性,当input或者textarea设 ...
- 让IE下支持Html5的placeholder属性
HTML5对Web Form做了许多增强,比如input新增的type类型.Form Validation等. Placeholder 是HTML5新增的另一个属性,当input或者textarea设 ...
- HTML5之placeholder属性以及如何更改placeholder属性中文字颜色
今天在群里看到群友问了一个这样的问题,就是如何更改placeholder属性中文字的颜色,以前用过这属性,却是没更改过颜色,于是便试了试,中途遇到些问题,查找资料后特来总结一下. 熟悉HTML5的人应 ...
- 转: HTML5之placeholder属性以及如何更改placeholder属性中文字颜色
今天在群里看到群友问了一个这样的问题,就是如何更改placeholder属性中文字的颜色,以前用过这属性,却是没更改过颜色,于是便试了试,中途遇到些问题,查找资料后特来总结一下. 熟悉HTML5的人应 ...
- Html5 input placeholder 属性字体颜色修改。
这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识,需要的朋友可以参考下 Chrome支持input=[type=text]占位文本属性,但下列CSS样式 ...
- HTML5的placeholder属性如何实现换行
在HTML5中,placeholder是一个非常有用的属性,当控件中无内容时可以代替UI控件的提示功能,而不需要写额外的代码.但如果有一个textarea控件,我们需要多行的文本提示信息时,使用”\n ...
- IE678910不兼容H5的placeholder属性,需要JS解决
两种方法的思路 一.使用input的value作为显示文本 二.不使用value,添加一个额外的span标签,绝对定位覆盖到input上面. 两种方式各有优缺点,方法一占用了input的value属性 ...
随机推荐
- Win7如何解决精简版的迅雷7无法运行
网上下载msvcp71.dll和msvcr71.dll把文件放到System32目录下即可 http://www.baidu.com/s?wd=msvcp71.dll&ie=utf-8&a ...
- apache TIME_WAIT解决办法
最近发现apache与负载均衡器的的连接数过多,而且大部分都是TIME_WAIT,调整apache2.conf后也没效果,最后百度到如下解决方案 通过调整内核参数解决 vi /etc/sysctl.c ...
- VueJS路由
Vue.js 路由 本章节我们将为大家介绍 Vue.js 路由. Vue.js 路由允许我们通过不同的 URL 访问不同的内容. 通过 Vue.js 可以实现多视图的单页Web应用(single pa ...
- Android VS IOS
时间: IOS:var d = new Date("2018-04-19 14:23:00".replace(/-/g, "/")); (d = new Dat ...
- Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
code&monkey Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...
- ckdeitor的使用方法
CKEditor 3 JavaScript API Documentation : http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.con ...
- Oracle -- 连接每行的内容
select wm_concat(message) from ( select rownum no, 'Case ''' || code || '''' || '' || chr(10) ...
- programming review (c++): (3)graph, binary search
I.graph #include <iostream> #include <vector> using namespace std; vector<vector<, ...
- 如何在linux下解压缩rar格式的文件压缩包
##########################################################如何在linux下解压缩rar格式的文件压缩包#date:2014年2月15日22: ...
- onscreen and offscreen
本文来自stackoverflow一位网友的解答,感觉非常不错就摘录了. --------------------------------------------------------------- ...