Dynamic prefilled input fields in Joomla! with jQuery

Suppose the following inline JavaScript from the Joomla! (v. 1.0.16) CMS in the mod_search.php module:

<input type="text" onfocus="if(this.value=='search...') this.value='';"
onblur="if(this.value=='') this.value='search...';"value="search..." size="20"
class="inputbox_site_search" alt="search" maxlength="20" id="mod_search_searchword"
name="searchword" />

In English:

The search input field will display the value "search ..." when the page loads.
When the user clicks on the input field (onfocus), the value "search ..." clears.
When the user clicks elsewhere on the page (onblur), the value is "search ..." again, unless the user filled out the form field with a value.

Rather than using inline JavaScript, it would be beneficial, considering modularity and re-usability of the code, to use unobtrusive JavaScript with the help of jQuery. After implementing this, the inline JavaScript can be safely removed from Joomla!'s mod_search.php module.

Change this line (in the mod_search.php module) from:

$output = 'Search <input name="searchword" id="mod_search_searchword"
maxlength="20" alt="search" class="inputbox'. $moduleclass_sfx .'"
type="text" size="'. $width.'" value="'. $text .'"
onblur="if(this.value==\'\') this.value=\''. $text .'\';"
onfocus="if(this.value==\''. $text .'\') this.value=\'\';">';

To:

$output = '<label for="mod_search_searchword">Search</label>
<input name="searchword" id="mod_search_searchword" maxlength="20"
alt="search" class="inputbox'. $moduleclass_sfx .'" type="text"
size="'. $width .'">';

Another change from the original Joomla! mod_search.php module is the addition of the <label> tag. The <label> has been added for accessibility and usability reasons. One advantage is, if the user clicks on the <label> enclosed word, the related form field will be selected. Load the scripts within the <head> section of the Joomla! template and upload them into the appropriate directory on a server ("jquery.prefilled.input.js" is the code sample at the bottom):

<script language="javascript" type="text/javascript"
src="templates/<?=TEMPLATE_NAME?>/scripts/jquery-1.2.6.min.js">
</script>
<script language="javascript" type="text/javascript"
src="templates/<?=TEMPLATE_NAME?>/scripts/jquery.prefilled.input.js">
</script>

Helpful links about this procedure:

http://jquery.com => jQuery web site
http://visualjquery.com/1.1.2.html => jQuery cheat sheet
http://en.wikipedia.org/wiki/Unobtrusive_JavaScript => Unobtrusive JavaScript

Other Notes:

this.value in jQuery is notated as $(this).val()
the html attribute onfocus is focus() in JavaScript
the html attribute onblur is blur() in JavaScript
#mod_login_username is the CSS id for the input user name field in Joomla! CMS
if more than three form fields are used, perhaps a loop can be implemented by creating an array of the input values and CSS id's

The JavaScript ("jquery.prefilled.input.js") file (for the search input field only):

$(document).ready(function(){
// Setting initial values for prefilled input fields
var seek = "Search ..."; // values can be changed to whatever you want
// assigning the variables to the input form elements
$("#mod_search_searchword").val(seek); // setting a value for search field
// styling the input values for usability
$("#mod_search_searchword").css({color: "#666666", background: "#E4E4E4"});
// when inactive the greyed out color will be displayed
// END of setting initial values
// "Search ..." functions
// clearing the value for "Search ..."
$("#mod_search_searchword").focus(function(){
if($(this).val() == seek){
$(this).val("");
}
$("#mod_search_searchword").css({color: "#000000", background: "#FFFFFF"});
});
// entering the value of "Search ..." when user has not filled out form field
$("#mod_search_searchword").blur(function(){
if($(this).val() == ("")){
$(this).val(seek);
}
$("#mod_search_searchword").css({color: "#666666", background: "#E4E4E4"});
});
// END of "Search ..." functions
});

reiner krämer.
:)

Tuesday, July 8, 2008