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) {

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


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

Leave a comment

Be kind

If you would like to discuss anything about this post, please be polite and add your comments below.



No HTML is allowed. All links, and new lines will be automagically converted to HTML for you.
Notice to spammers, all links will be sanitized with rel="nofollow".

Contact Me

Get In Touch

If you would like to discuss anything about your next project please drop me a line.



Projects start at £99.00 per month
We normally book 2–3 months in advance.


No matter how small your project is, or if the prices above scare you, please do get in touch, I shall always listen and will advise freely alternative ideas or solutions. If you are a charity, let's talk!

Find Me On