Textarea Placeholder Text

Just a quick note this week, but a very uesful one to know. I have been working on a very modern clean illustrated website this week, and wanted a nicely formatted form with Safari style placeholder text as labels.

All well and good, placeholder obviously works great in Safari, and with a little jQuery every other browser too:

	if (!$.browser.webkit) {
$('input').placeholder(); 
}

Obviously we want to override Safari’s default implementation.

Next lets define some variables to make use of in our script:

	new function($) {
$.fn.placeholder = function(settings) {   
settings = settings || {};  
var key = settings.dataKey || "placeholderValue";  
var attr = settings.attr || "placeholder";  
var className = settings.className || "placeholder";  
var values = settings.values || [];  var block = settings.blockSubmit || false;  
var blank = settings.blankSubmit || false;  
var submit = settings.onSubmit || false;  var value = settings.value || "";  
var position = settings.cursor_position || 0;

	return this.filter(":input").each(function(index) { 
 $.data(this, key, values[index] || 
$(this).attr(attr));  }).each(function() {  
if ($.trim($(this).val()) === "")  
$(this).addClass(className).val($.data(this, key));  }).focus(function() {  
if ($.trim($(this).val()) === $.data(this, key))  $(this).removeClass(className).val(value)  
if ($.fn.setCursorPosition) {  
$(this).setCursorPosition(position); }  }).blur(function() {
 if ($.trim($(this).val()) === value)  
$(this).addClass(className).val($.data(this, key));  }).each(function(index, elem) {  
if (block) new function(e) {  $(e.form).submit(function() {  
return $.trim($(e).val()) != $.data(e, key)  }); }(elem);  
else if (blank) new function(e) {  $(e.form).submit(function() { 
 if ($.trim($(e).val()) == $.data(e, key)) 
 $(e).removeClass(className).val("");  return true; }); }(elem); 
 else if (submit) new function(e) {  $(e.form).submit(submit); }(elem);  }); }; 
 var setTextareaState = function(ev) {  
var $this = $(this), val = $this.val(),  placeholder = $this.attr('placeholder');  
if (ev.type == 'mousedown' && val == placeholder ) {  
$this.val(''); } else if (ev.type == 'mouseout' && val == '' && !!placeholder) {  $this.val(plcaeholder); } }; }(jQuery);

This works wonders, until we come to Textarea fields. Safari has an incomplete implementation for the CSS3 spec, and you will not see and placeholder text on your textarea’s.

Again, jQuery comes to the rescue, all be it unfortunately the color has to be black. But here goes:

	 $(function () {   var setTextareaState = function(ev) {    var $this = $(this), val = $this.val(),  placeholder = $this.attr('placeholder');    if (ev.type == 'mousedown' && val == placeholder ) {  $this.val('');  }   else if (ev.type == 'mouseout' && val == '' && !!placeholder) { $this.val(placeholder); }}; $('form textarea').live('mousedown', setTextareaState).live('mouseout', setTextareaState); $('textarea').each(function(){   var placeholder = $(this).attr('placeholder'); if (placeholder && $(this).val() == '') { $(this).val(placeholder); } }); });

Posted On: Friday, March 5th, 2010 @ 7:20 pm by Ian Tearle

---

0 Comments

There are no comments on this entry. You should add one below.