有的浏览器支持html5的水印placeholder(如Crome,firefox,ie10+),有的不支持html5的placeholder(ie9,ie8,ie7....),对于不支持placeholder的属性也能使用placeholderAttr,于是写了这个简单的jquery插件,发出来与大家分享,实现代码逻辑在代码中都有注释,实现细节请直接参看代码。

/**
* jqueryPlug : 给不支持html5 placeholder水印功能的浏览器打补丁
*/ ;(function($){
'use strict';
///////////////////////////////////////////////////////// /*
* 扩展jquery实例方法
*/
$.fn.powerplaceholder = function(){ /*
* PlaceHolder 实例构造函数
* @param [DOM Instance] elm
*/
var PlaceHolder = function(elm){
this.$elm = $(elm);
this.$span = $("<span></span>").text(this.$elm.attr("placeholder")).css({
"position":"absolute",
"display":"inline-block",
"color":"#ccc",
"overflow":"hidden",
"padding-left":"2px",
"padding-top":"2px",
"left":this.$elm.offset().left,
"top":this.$elm.offset().top,
"font-size":this.$elm.css("font-size"),
"width":this.$elm.width()+2,
"height":this.$elm.height()+2
}).appendTo("body");
this.init();
} /**
* 静态方法:是否支持html5的placeholder
*/
PlaceHolder.isSupportHtml5 = function(){
var i = document.createElement('input');
return 'placeholder' in i;
} /**
* 实例方法:
*/
PlaceHolder.prototype = { /*
* 控制setInterval方法的实例,释放setInterval
*/
intervalInstance:null, /*
* @function 初始化
*/
init:function(){
this.showOrHide(); this.$elm.on("focus.PlaceHolder",$.proxy(this.focus,this))
.on("blur.PlaceHolder",$.proxy(this.blur,this)); this.$span.on("click.PlaceHolder",$.proxy(this.clickSpan,this));
}, /*
* 聚焦
*/
focus:function(){
var self = this; // 不要重复调用setInterval
if (self.intervalInstance) {
return;
} /*
* 应该所示插件的核心:每隔50s判断一下输入框是否有值,有值显示,无值隐藏;
* 权衡是否这里应该使用keydown来做这个事情,使用setInverval是不是太耗费资源了??
*/
self.intervalInstance = setInterval(function(){
self.showOrHide();
},50);
}, /*
* 失焦
*/
blur:function(){ // clearInterval
clearInterval(this.intervalInstance);
this.intervalInstance = null; this.showOrHide();
}, /*
* 点击span时要触发输入框的focus事件
*/
clickSpan:function(){
this.$elm.trigger("focus.PlaceHolder");
}, /*
* 输入框有值显示placeholder,没有值隐藏placeholder
*/
showOrHide:function(){
if (this.$elm.val()) {
this.$span.hide();
}else{
this.$span.show();
}
}
}; /**
* 插件入口
* 支持html5的,采用原生态支持,不做任何处理;不支持html5 placeholder的采用插件实现模式支持
*/
if (!PlaceHolder.isSupportHtml5()) {
return this.each(function(){
new PlaceHolder(this);
});
}else{
return this;
};
}
})(jQuery);
 
 
分类: Jquery

jquery水印插件:placeholder的更多相关文章

  1. JQuery文本框水印插件的简单实现

    采用JQuery实现文本框的水印效果非常容易,效果如下: 代码片段,定义要应用水印效果的文本框的样式: .watermark { color: #cccccc; } 将JavaScript代码封装成J ...

  2. Jquery插件placeholder的用法

    闲的蛋疼,演示一下Jquery插件placeholder的用法,借助该插件能够轻松实现HTML5中placeholder特效: 效果图: 实现代码: <%@ page language=&quo ...

  3. 基于jquery 的插件,让IE支持placeholder属性

    开发一个项目的时候为了美观和用户体验用到了input标签的placeholder属性,但是这个属性是html5中的,所以低版本的IE浏览器不支持.于是在百度找了一些解决方法,找了好几个都不是那么完美, ...

  4. jquery.validate插件在booststarp中的运用

    现在在网络上已经可以找到很多基于bootstarp的表单认证,但是验证的都不全面的,下载后,我们还要理解作者的思路然后进行修改添加,这种修改方式往往适合学习,时间很多的时候.但是我们很多时候是没有时间 ...

  5. jquery.dataTables插件使用例子详解

    DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格 效果图 代码 <!doctype html> & ...

  6. 【jQuery】(6)---jQuery validate插件

    jQuery  validate插件 一.导入js库                                      先导入jQuery库,然后导入Validate插件,如果是中文提示还需要 ...

  7. jquery表格插件Datatables使用、快速上手

    Datatables使用 一.简介 官网:https://datatables.net/ 中文官网:http://datatables.club/ Datatables是一款jquery表格插件.它是 ...

  8. 深入学习jQuery自定义插件

    原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(o ...

  9. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

随机推荐

  1. 第23章 访问者模式(Visitor Pattern)

    原文 第23章 访问者模式(Visitor Pattern) 访问者模式 导读:访问者模式是我个人认为所有行为模式中最为复杂的一种模式了,这个模式可能看一遍会看不懂,我也翻了好几个例子,依然不能很好的 ...

  2. 房间计费系统改造E-R图纸设计

    简单的学习过程:     这几天忙得太混乱了,用了近一个星期才设计好.我在这段时间遇到的困难,就积极找师哥师姐指点迷津,如今多少总算是有些拿得出手的成果. 学习成果: Entity Relations ...

  3. 乐趣与你rabbitMQ 源代码

    RabbitMQ API RabbitMQ Server它提供了丰富的http api. 对于列子 须要HTTP基本身份验证.默认的username/password为guest/guest. 这些返 ...

  4. hdu 4932 Miaomiao&#39;s Geometry(暴力)

    题目链接:hdu 4932 Miaomiao's Geometry 题目大意:在x坐标上又若干个点,如今要用若干条相等长度的线段覆盖这些点,若一个点被一条线段覆盖,则必须在这条线的左端点或者是右端点, ...

  5. Write the code.Change the world.---WWDC2014

  6. 深入理解JavaScript(1)

    才华横溢的Stoyan Stefanov,在他写的由O’Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会 ...

  7. 把VBScript的函数迁移到C#.NET

    原文:把VBScript的函数迁移到C#.NET VBScript 5.6 Functions C# code Abs System.Math.Abs Array New Object() { } A ...

  8. javascript6

    eval("3+2")//5 eval():全局eval():严格eval() 函数和可执行的对象(callable object) delete一元操作符,善处对象属性或者数组元 ...

  9. [推荐]ORACLE PL/SQL编程详解之三:PL/SQL流程控制语句(不给规则,不成方圆)

    原文:[推荐]ORACLE PL/SQL编程详解之三:PL/SQL流程控制语句(不给规则,不成方圆) [推荐]ORACLE PL/SQL编程详解之三: PL/SQL流程控制语句(不给规则,不成方圆) ...

  10. UVA-11134-Fabled Rooks (结构排序+贪婪)

    这个问题更像八皇后问题,但在位置在大选前必须进行排序,让左侧的优选位置,我没想到这死脑筋! 行,这个问题是不是代码贴. 版权声明:本文博客原创文章.博客,未经同意,不得转载.