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…

Novembre 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

PHP expert. Wordpress plugin and theme developer. Father, Maker, Arduino and ESP8266 enthusiast.

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

Just one thought

  1. Wilfred Graveline ha detto:

    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