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?”

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

Recommended

Scroll to DIV by ID without jQuery

Use scrollIntoView instead of jQuery animate.

Dicembre 16, 2022

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…

Aprile 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…

Marzo 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…

Dicembre 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…

Novembre 18, 2009