Home › A simple jQuery placeholder plugin for text/password fields

A simple jQuery placeholder plugin for text/password fields 

James
Joined:
02/21/2009
Posts:
151

September 20, 2012 10:22:58    Last update: September 20, 2012 10:22:58
This is a simple jQuery placeholder plugin that can be used on both text and password fields.

I've been using the Mathias Bynens plugin for a while and it has been quite useful. I decided to create my own plugin because of two problems:
  1. The interaction between the Mathias Bynens plugin and jQuery validation can be quite intricate.
  2. Placeholder text is lost once the input field gets focus. This can be a problem when I want to auto-focus on a field, say user id on a log in form.


I must mention that although it worked for me, this plugin has not been thoroughly tested. Feel free to provide feedback if you see problems. 

(function($) {
    $.fn.placeholder = function() {
	if ('placeholder' in document.createElement('input')) {
	    return this;
	}

	this.filter('input[placeholder]').each(function() {
	    var name = $(this).attr('name');
	    var $placeholder = $(this).prevAll('label[placeholder-for="'+name+'"]');
	    if ($placeholder.length > 0) {
		$placeholder.css({
		    'top': parseInt($(this).css('border-top-width')) + $(this).position().top + 'px',
		    'left': parseInt($(this).css('border-left-width')) + $(this).position().left + 'px'
		});
	    }
	    else {
		$placeholder = $(this).before(function() {
		    return $('<label>')
		    .attr('placeholder-for', $(this).attr('name'))
		    .css({
			'position': 'absolute',
			'color': '#aaa',
			'background-color': 'transparent',
			'padding-top': $(this).css('padding-top'),
			'padding-left': $(this).css('padding-left'),
			'margin-top': $(this).css('margin-top'),
			'margin-left': $(this).css('margin-left'),
			'top': parseInt($(this).css('border-top-width')) + $(this).position().top + 'px',
			'left': parseInt($(this).css('border-left-width')) + $(this).position().left + 'px',
			'font-family': $(this).css('font-family'),
			'font-size': $(this).css('font-size'),
			'font-weight': $(this).css('font-weight'),
		    	'width': '1px',
			'overflow': 'visible',
			'white-space': 'nowrap'
		    }).html($(this).attr('placeholder'));
		})
		.bind('keyup', function() {
		    if (this.value) {
			$(this).prevAll('label[placeholder-for="'+name+'"]').hide();
		    }
		    else {
		       $(this).prevAll('label[placeholder-for="'+name+'"]').show();
		    }
		})
		.prev().bind('click', function() {
		    $(this).nextAll('input[name="'+name+'"]').focus();
		});
	    }

	    if (this.value) {
		$placeholder.hide();
	    }
	    else {
		$placeholder.show();
	    }
	});
	return this;
    }
})(jQuery);


Since it uses absolute positioning, you have to call placeholder() each time the position of the input field changes. Hopefully, it easy to plugin the call in the right places. In the worse case, you can use a timer: 
window.setInterval('$("input").placeholder()', 100);
Share |
| Comment  | Tags
 

Related Notes