Skip to content

Instantly share code, notes, and snippets.

@zykadelic
Last active December 14, 2015 23:49
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 zykadelic/5168733 to your computer and use it in GitHub Desktop.
Save zykadelic/5168733 to your computer and use it in GitHub Desktop.
Cross-browser placeholder support, a modified version of Caleb Ogden’s jQuery placeholder
.ui-placeholder-wrap {
position: relative;
display: block;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.ui-placeholder {
position: absolute;
top: 0;
left: 0;
display: inline-block;
vertical-align: middle;
overflow: hidden;
cursor: text;
}
(function($){
$.fn.placeholder = function(){
return this.each(function(){
var base = $(this);
var wrap = $('<span>').addClass('ui-placeholder-wrap');
if(!base.parents('.ui-placeholder-wrap').length){
var placeholder = $('<span>').addClass('ui-placeholder').on('click.placeholder', function(){
$(this).siblings('input, textarea').focus();
$(this).parent().addClass('ui-placeholder-active');
}).html(base.attr('placeholder'));
base.attr('placeholder', '').wrap(wrap).after(placeholder).on('focus.placeholder focusout.placeholder', function(){
if($(this).val() == ''){
$(this).siblings('.ui-placeholder').fadeIn('fast');
}
$(this).parent().toggleClass('ui-placeholder-active');
}).on('keydown.placeholder', function(e){
e.stopPropagation();
setTimeout(function(){
if(base.val() == ''){
base.siblings('.ui-placeholder').fadeIn(250);
}else{
base.siblings('.ui-placeholder').hide();
}
}, 50);
});
if(base.val() !== ''){
placeholder.hide();
}
}
});
}
})(jQuery);
(function(e){e.fn.placeholder=function(){return this.each(function(){var t=e(this);var n=e("<span>").addClass("ui-placeholder-wrap");if(!t.parents(".ui-placeholder-wrap").length){var r=e("<span>").addClass("ui-placeholder").on("click.placeholder",function(){e(this).siblings("input, textarea").focus();e(this).parent().addClass("ui-placeholder-active")}).html(t.attr("placeholder"));t.attr("placeholder","").wrap(n).after(r).on("focus.placeholder focusout.placeholder",function(){if(e(this).val()==""){e(this).siblings(".ui-placeholder").fadeIn("fast")}e(this).parent().toggleClass("ui-placeholder-active")}).on("keydown.placeholder",function(e){e.stopPropagation();setTimeout(function(){if(t.val()==""){t.siblings(".ui-placeholder").fadeIn(250)}else{t.siblings(".ui-placeholder").hide()}},50)});if(t.val()!==""){r.hide()}}})}})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment