开发一个项目的时候为了美观和用户体验用到了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
<scriptsrc="//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属性的更多相关文章

  1. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  2. 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js

    在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...

  3. 基于JQuery.timer插件实现一个计时器

    基于JQuery.timer插件实现一个计时器,需要的朋友可以参考下.   先去官网下载jQuery Timers插件 ,然后引用到html中.这里是1.2 version 复制代码代码如下: < ...

  4. 基于 jQuery Jcrop 插件的功能模块:头像剪裁

    /** Jcrop version: 0.9.12 jQuery version: 1.9.0 Author: 小dee Date: 2014.10.30 */ 先看看他山之石:博客园的头像模块也是使 ...

  5. 基于jQuery日历插件制作日历

    这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...

  6. 基于jquery 移动插件的实现

    引用谢灿勇 地址  http://www.cnblogs.com/st-leslie/p/6002148.html 一个思路分析:大致上实现的思路有以下两种. 一.判断块是否被按下(mousedown ...

  7. 让ie8支持 placeholder 属性

    一.  ie8支持 placeholder 属性 /* * ie8支持 placeholder 属性 */ $(function(){ if( !('placeholder' in document. ...

  8. input date 支持placeholder属性

    第一种解决方法:IE,火狐浏览器,不支持input date的日历功能,火狐支持日历功能   ie,火狐,谷歌显示placeholder属性 css代码 #dateofday:before{  col ...

  9. 编写基于jQuery的插件的方法

    注意:jQuery中有一个extend的方法,这个方法是添加js对象字段的,下面会多次用到 1:添加全局类的方法 常用的ajax就是该类插件,下面要编写一个简单的加法和减法的基于jQuery的方法 $ ...

随机推荐

  1. C++中strftime()的详细说明

    我们可以使用strftime()函数将时间格式化为我们想要的格式.它的原型如下: size_t strftime( char *strDest, size_t maxsize, const char  ...

  2. Ubuntu下安装为知笔记

    之前在Windows下用的是有道云笔记,但是后来开始习惯使用Linux开发,有道云官方并没有提供Ubuntu的版本,所以权衡之下,选择了为知笔记,安装步骤: sudo add-apt-reposito ...

  3. SpringMVC使用session实现简单登录

    1.首先为了能直观地在jsp页面体现session的内容,我使用了jstl表达式,首先在pom.xml中引入jstl的依赖 <!-- jstl所需要的依赖 --> <dependen ...

  4. PS更换证件照颜色

    PS是我们经常使用的设计软件,在生活中使用的范围也很广,但是对于普通的用户来说,也就是平时给自己的照片美化一下,还有就是做一些证件照.今天和大家分享的是更改证件照的颜色,网上可能有很多,但是个人感觉都 ...

  5. SVN客户端与服务器端搭建操作

    一.客户端的安装 1.点击安装程序 2.修改svn安装位置 3.开始安装 4.客户端安装成功 5.回到左面  右键出现svn检出 tortoiSVN  表示安装成功 Myeclipse svn插件安装 ...

  6. bzoj 3192 删除物品

    Written with StackEdit. Description 箱子再分配问题需要解决如下问题: (1)一共有\(N\)个物品,堆成\(M\)堆. (2)所有物品都是一样的,但是它们有不同的优 ...

  7. 关于Spring框架你解多少?

    类似于谈谈你对Spring的了解的题目,在很多面试中都会被提到的. Spring,英文意思是春天的意思.在java的世界里,Spring是一个现时非常流行的开源应用框架. Spring 框架是一个分层 ...

  8. FastAdmin CMS 插件相关文章收集(2018-08-16)

    FastAdmin CMS 插件相关文章收集(2018-08-16) CMS内容管理系统(含小程序) 介绍 https://www.fastadmin.net/store/cms.html CMS内容 ...

  9. font-face自定义字体使用方法

    今天闲的蛋疼小七来聊一聊关于css3的font-face属性的使用方法: 首先应该好多人没用过这个属性,那只能说你们的设计师还是有人性的, 一旦电脑系统没有的特殊字体或者你设计师故意装13为难你就需要 ...

  10. python使用wxPython创建一个简单的文本编辑器。

    ubuntu下通过'sudo apt-get install python-wxtools'下载wxPython.load和save函数用于加载和保存文件内容,button通过Bind函数绑定这两个函 ...