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");
}
);
Related posts: