基于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的方法 $ ...
随机推荐
- Apache的Mod_rewrite学习 (RewriteCond重写规则的条件) 转
RewriteCondSyntax: RewriteCond TestString CondPattern [flags] RewriteCond指令定义一条规则条件.在一条RewriteRule指令 ...
- python笔记-5(内置函数)
一.内置函数 1.abs()--取绝对值函数 print(abs(-0.11)) x=-0.01 y=0.11 print(abs(x),abs(y)) ----------------------- ...
- niosii 改变软核之后重新编译方法
操作系统:Win7 64 bit 开发环境:Quartus II 12.0 (64-Bit) + Nios II 12.0 Software Build Tools for Eclipse 使用Qu ...
- javascript中原型学习
学习地址:http://www.cnblogs.com/wangfupeng1988/tag/%E5%8E%9F%E5%9E%8B/
- Vue.js:路由
ylbtech-Vue.js:路由 1.返回顶部 1. Vue.js 路由 本章节我们将为大家介绍 Vue.js 路由. Vue.js 路由允许我们通过不同的 URL 访问不同的内容. 通过 Vue. ...
- jQuery解析JSON出现SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data
SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data 我在使用$.parseJSON解析后 ...
- Oracle数据库Where条件执行顺序
由于SQL优化起来比较复杂,并且还会受环境限制,在开发过程中,写SQL必须必须要遵循以下几点的原则: 1.ORACLE采用自下而上的顺序解析WHERE子句,根据这个原理,表之间的连接必须写在其他WHE ...
- 小记一次mysql启动失败没有日志的处理
本来mysql好的,之前清理了一次tmp下的东西,mysql在查询的时候提示: Can't create/write to file '/tmp/ib0n3frL 然后停止启动: [root@sevc ...
- C Primer Plus学习笔记(十)- 字符串和字符串函数
getchar() 和 putchar() getchar() 函数不带任何参数,它从输入队列中返回下一个字符 下面的语句读取下一个字符输入,并把该字符的值赋给变量 ch ch =getchar(); ...
- ceph 对接openstack liberty
Ceph 准备工作 官方文档:http://docs.ceph.com/docs/master/rbd/rbd-openstack/ 官方中文文档:http://docs.ceph.org.cn/rb ...