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='';"In English:
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" />
- 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.
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
- 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
$(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
