Set “write here” on input type text?

If you are using JQuery framework and you want to set up the default value of some text box in…

November 17, 2009

If you are using JQuery framework and you want to set up the default value of some text box in a form you can use this function that defines the onclick function, the onblur function and set the default value and css.
The configuration of the input type text box is defined into the rel attribute, here is the first part, the html code:

<style>
input.csson { color: red; }
input.cssoff { color: gray; }
</style>
<form>
<input id='author' type='text' value='' rel="writehere|type author|cssoff|csson"/><br/>
<input id='topic' type='text' value='' rel="writehere|type topic|cssoff|csson"/><br/>
</form>

and this is the javascript function that add events and styles when your document is ready:

function setWriteHere(search) {
	/* add on click event handler */
	$("input[rel^="+search+"]").click( function () {
		var ar = $(this).attr('rel').split('|');
		if($(this).val()==ar[1]) { $(this).val(""); $(this).attr('class',ar[3]); }
	} );
	/* add on blur event handler */
	$("input[rel^="+search+"]").blur( function () {
		var ar = $(this).attr('rel').split('|');
		if($(this).val()=="") { $(this).val(ar[1]); $(this).attr('class',ar[2]); }
	} );
	/* trigger blur event */
	$("input[rel^="+search+"]").each( function () { $(this).blur(); } );

}


$(document).ready(function() {
	/* fix forms when ready */
	setWriteHere("writehere");
	} 
);

Author

I'm a software engineer, an everyday web developer and a maker. I usually build sites with PHP, within or without WordPress. I build Internet of Things with Arduino and ESP8266. I'm the founder of Rockit.it and Dailybest.it and I'm actually the Chief Technical Officer of Better Days web agency.

Comments on “Set “write here” on input type text?”

One thought

  1. Oh my gosh goodness! a wonderful article dude. Many thanks However My group is experiencing problem with ur rss . Don’t know why Cannot become a member of it. Is there anyone getting identical rss problem? Anyone who knows kindly respond. Thnkx

Comments are closed

Recommended

Modify list counter in :before pseudo class with jQuery using start attribute

Suppose you have two ordered list ol tags, and the second one has a start attribute. You also have in…

April 20, 2016

How to write a text description into html input type password

Sometime designers put form labels and instrucions into html inputs. One of the common uses is for login boxes when…

March 10, 2010

Mini gallery/slideshow with PHP and JQuery

Sometimes I’ve had to quickly put in a page a simple slideshow, the first times I’ve searched a lot around…

December 13, 2009

Click links with JavaScript

If you want to click on objects, anchors, table cells or any other html element to emulate the javascript behaviour…

November 18, 2009

Add Internet Explorer class to body to detect old browser

When you have clients that still uses an old browser, you need to handle it. This javascript function detects the…

February 27, 2017

Limit the number of categories for posts in WordPress

CHOOSE ONLY ONE CATEGORY WORDPRESS If you need to limit the number of categories used by the authors of your…

September 14, 2015