Skip to content

Instantly share code, notes, and snippets.

@SparK-Cruz
Last active August 29, 2015 13:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SparK-Cruz/9096590 to your computer and use it in GitHub Desktop.
Save SparK-Cruz/9096590 to your computer and use it in GitHub Desktop.
jQuery plugin for html5 placeholder backward compatibility
/**
* Placeholder - jQuery Plugin
* Emulates the html5 placeholder effect on older browsers
*
* Copyright (c) 2014 Roger 'SparK' Rodrigues da Cruz
*
* Version: 0.3 (14/02/2014)
* Requires: jQuery
*
* Dual licensed under GPL and MIT:
* http://www.gnu.org/licenses/gpl.html
* http://www.opensource.org/licenses/mit-license.php
*/
;(function($){
$.fn.placeholder = function(options){
if("placeholder" in document.createElement("input")) return;
var opt = {
type: "auto",
disabledColor: "#7f7f7f"
}
$.extend(opt,options);
$(this).each(function(){
var obj = {
element: this,
color: $(this).css("color"),
type: (opt.type=="auto")?$(this).attr("type"):opt.type,
text: $(this).val() == ''?$(this).attr("placeholder"):$(this).val(),
active: true,
tryEnable: function(){
if(this.active) return;
$(this.element).val("");
$(this.element).css("color",this.color);
if(this.type == "password" && $.browser.firefox)
$(this.element).attr("type","password");
this.active = true;
},
tryDisable: function(){
if(!this.active) return;
if(!!$(this.element).val()) return;
$(this.element).val(this.text);
$(this.element).css("color",opt.disabledColor);
if(this.type == "password" && $.browser.firefox)
$(this.element).attr("type","text");
this.active = false;
}
}
obj.tryDisable();
$(obj.element).keyDown(function(){
obj.tryEnable();
});
$(obj.element).blur(function(){
obj.tryDisable();
});
$(obj.element).parents("form").bind("reset",function(event){
setTimeout(function(){
$(obj.element).val("");
obj.active = true;
obj.tryDisable();
},0);
});
$(obj.element).parents("form").submit(function(event){
obj.enable();
setTimeout(function(){
obj.tryDisable();
},0);
});
});
}
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment