placeholder(HTML 5) IE 兼容插件-技术博客集

placeholder(HTML 5) IE 兼容插件
编程技术 / houtizong 发布于 3年前 117

placeholder 这个属性被越来越频繁的使用.但为做HTML 5 特性IE没能实现这东西.以下的jQuery插件就是用来在IE上实现该属性的.

/** * [placeholder(HTML 5) IE 实现.IE9以下通过测试.] * v 1.0 by oTwo 2014年7月31日 11:45:29 */$.fn.placeholder = function() {// 当系统支持 placeholder 时使用系统自带的.if ('placeholder' in document.createElement('input')) {return;}this.each(function(index, val) {var ele = $(this);//创建 显示层var div = $('<div>').css({"color": "#cccccc","cursor": "text","position": "absolute","display": ele.val() ? 'none' : 'block',"zIndex": ele.css('zIndex') == 'auto' ? 'auto' : ele.css('zIndex') - 0 + 1,"left": ele.offset().left + 14,"top": ele.offset().top,"width": ele.outerWidth() - 14,"height": ele.outerHeight()}).text(ele.attr('placeholder')).appendTo('body');//绑定事件div.click(function(e) {ele.focusin().focus();});ele.focusin(function() {if ($(this).val()) {return;}div.hide();});ele.focusout(function() {if ($(this).val()) {return;}div.show();});});return this;};

上一篇：for循环的进化

下一篇：百度词库联想

请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！

<div  >  <pre name="code" class="js">placeholder 这个属性被越来越频繁的使用.但为做HTML 5 特性IE没能实现这东西.以下的jQuery插件就是用来在IE上实现该属性的.</pre>  <pre name="code" class="js">/** * [placeholder(HTML 5) IE 实现.IE9以下通过测试.] * v 1.0 by oTwo 2014年7月31日 11:45:29 */$.fn.placeholder = function() {// 当系统支持 placeholder 时使用系统自带的.if ('placeholder' in document.createElement('input')) {return;}this.each(function(index, val) {var ele = $(this);//创建 显示层var div = $('&lt;div&gt;').css({&quot;color&quot;: &quot;#cccccc&quot;,&quot;cursor&quot;: &quot;text&quot;,&quot;position&quot;: &quot;absolute&quot;,&quot;display&quot;: ele.val() ? 'none' : 'block',&quot;zIndex&quot;: ele.css('zIndex') == 'auto' ? 'auto' : ele.css('zIndex') - 0 + 1,&quot;left&quot;: ele.offset().left + 14,&quot;top&quot;: ele.offset().top,&quot;width&quot;: ele.outerWidth() - 14,&quot;height&quot;: ele.outerHeight()}).text(ele.attr('placeholder')).appendTo('body');//绑定事件div.click(function(e) {ele.focusin().focus();});ele.focusin(function() {if ($(this).val()) {return;}div.hide();});ele.focusout(function() {if ($(this).val()) {return;}div.show();});});return this;};</pre>  <p>&nbsp;</p> </div>

留言需要登陆哦

技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];

文章归档

文章标签

友情链接

首页
关于我们

Auther ·HouTiZong: 侯体宗的博客