基于jquery 的插件,让IE支持placeholder属性
开发一个项目的时候为了美观和用户体验用到了input标签的placeholder属性,但是这个属性是html5中的,所以低版本的IE浏览器不支持。于是在百度找了一些解决方法,找了好几个都不是那么完美,最后决定将其中的一个拿来完善一下。
完善后的代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
jQuery.fn.placeholder = function (){ var i = document.createElement( 'input' ),placeholdersupport = 'placeholder' in i; if (!placeholdersupport){ var inputs = jQuery( this ); inputs.each( function (){ var input = jQuery( this ), text = input.attr( 'placeholder' ), pdl = 0,height = input.outerHeight(), width = input.outerWidth(), placeholder = jQuery( '<span class="phTips">' +text+ '</span>' ); try { pdl = input.css( 'padding-left' ).match(/\d*/i)[0] * 1; } catch (e){ pdl = 5; } placeholder.css({ 'margin-left' : -(width-pdl), 'height' :height, 'line-height' :height+ "px" , 'position' : 'absolute' , 'color' : "#cecfc9" , 'font-size' : "12px" }); placeholder.click( function (){ input.focus(); }); if (input.val() != "" ){ placeholder.css({display: 'none' }); } else { placeholder.css({display: 'inline' }); } placeholder.insertAfter(input); input.keydown( function (e){ placeholder.css({display: 'none' }); }); input.keyup( function (e){ if (jQuery( this ).val() != "" ){ placeholder.css({display: 'none' }); } else { placeholder.css({display: 'inline' }); } }); }); } return this ; }; |
其中第33到35行代码是我加上去的,原来的代码可以用,但是键入的时候提示内容隐藏有点反应慢,分析代码后发现是对keyup引起了,增加keydown后就几近完美了。
使用时将上面的代码保存为placeholder.jquery.js.
用法:
首先引入jquery
1
|
< script src = "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></ script > |
然后引入我们的插件
1
|
<script src= "/js/placeholder.jquery.js" ></script> |
最后写上调用代码就可以了
1
2
3
4
5
|
< script > $(document).ready(function(e) { $('input[placeholder]').placeholder(); }); </ script > |
代码参考:http://blog.163.com/yhwwen@126/blog/static/17046885320135915529172/
在此感谢代码作者!
基于jquery 的插件,让IE支持placeholder属性的更多相关文章
- 基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
- 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js
在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
- 基于JQuery.timer插件实现一个计时器
基于JQuery.timer插件实现一个计时器,需要的朋友可以参考下. 先去官网下载jQuery Timers插件 ,然后引用到html中.这里是1.2 version 复制代码代码如下: < ...
- 基于 jQuery Jcrop 插件的功能模块:头像剪裁
/** Jcrop version: 0.9.12 jQuery version: 1.9.0 Author: 小dee Date: 2014.10.30 */ 先看看他山之石:博客园的头像模块也是使 ...
- 基于jQuery日历插件制作日历
这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...
- 基于jquery 移动插件的实现
引用谢灿勇 地址 http://www.cnblogs.com/st-leslie/p/6002148.html 一个思路分析:大致上实现的思路有以下两种. 一.判断块是否被按下(mousedown ...
- 让ie8支持 placeholder 属性
一. ie8支持 placeholder 属性 /* * ie8支持 placeholder 属性 */ $(function(){ if( !('placeholder' in document. ...
- input date 支持placeholder属性
第一种解决方法:IE,火狐浏览器,不支持input date的日历功能,火狐支持日历功能 ie,火狐,谷歌显示placeholder属性 css代码 #dateofday:before{ col ...
- 编写基于jQuery的插件的方法
注意:jQuery中有一个extend的方法,这个方法是添加js对象字段的,下面会多次用到 1:添加全局类的方法 常用的ajax就是该类插件,下面要编写一个简单的加法和减法的基于jQuery的方法 $ ...
随机推荐
- C++中strftime()的详细说明
我们可以使用strftime()函数将时间格式化为我们想要的格式.它的原型如下: size_t strftime( char *strDest, size_t maxsize, const char ...
- Ubuntu下安装为知笔记
之前在Windows下用的是有道云笔记,但是后来开始习惯使用Linux开发,有道云官方并没有提供Ubuntu的版本,所以权衡之下,选择了为知笔记,安装步骤: sudo add-apt-reposito ...
- SpringMVC使用session实现简单登录
1.首先为了能直观地在jsp页面体现session的内容,我使用了jstl表达式,首先在pom.xml中引入jstl的依赖 <!-- jstl所需要的依赖 --> <dependen ...
- PS更换证件照颜色
PS是我们经常使用的设计软件,在生活中使用的范围也很广,但是对于普通的用户来说,也就是平时给自己的照片美化一下,还有就是做一些证件照.今天和大家分享的是更改证件照的颜色,网上可能有很多,但是个人感觉都 ...
- SVN客户端与服务器端搭建操作
一.客户端的安装 1.点击安装程序 2.修改svn安装位置 3.开始安装 4.客户端安装成功 5.回到左面 右键出现svn检出 tortoiSVN 表示安装成功 Myeclipse svn插件安装 ...
- bzoj 3192 删除物品
Written with StackEdit. Description 箱子再分配问题需要解决如下问题: (1)一共有\(N\)个物品,堆成\(M\)堆. (2)所有物品都是一样的,但是它们有不同的优 ...
- 关于Spring框架你解多少?
类似于谈谈你对Spring的了解的题目,在很多面试中都会被提到的. Spring,英文意思是春天的意思.在java的世界里,Spring是一个现时非常流行的开源应用框架. Spring 框架是一个分层 ...
- FastAdmin CMS 插件相关文章收集(2018-08-16)
FastAdmin CMS 插件相关文章收集(2018-08-16) CMS内容管理系统(含小程序) 介绍 https://www.fastadmin.net/store/cms.html CMS内容 ...
- font-face自定义字体使用方法
今天闲的蛋疼小七来聊一聊关于css3的font-face属性的使用方法: 首先应该好多人没用过这个属性,那只能说你们的设计师还是有人性的, 一旦电脑系统没有的特殊字体或者你设计师故意装13为难你就需要 ...
- python使用wxPython创建一个简单的文本编辑器。
ubuntu下通过'sudo apt-get install python-wxtools'下载wxPython.load和save函数用于加载和保存文件内容,button通过Bind函数绑定这两个函 ...