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:
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.
:)
Posts
