1. Uses inline JavaScript, and must be reapplied to each element affected
2. Repeats the contents of the value attribute
3. The default text is not replaced if the user exits the field without entering new data

So I created a possible solution, using jQuery:

HTML

1

<input type="text" value="Place default text here" />

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14

jQuery( function(){
  $( 'input[type="text"]' ).each( function(){
    $(this).attr( 'title', $(this).val() )
      .focus( function(){
        if ( $(this).val() == $(this).attr('title') ) {
          $(this).val( '' );
        }
      } ).blur( function(){
        if ( $(this).val() == '' || $(this).val() == ' ' ) {
          $(this).val( $(this).attr('title') );
        }
      } );
  } );
} );

This script first iterates over each of the text input to assign a semantic text attribute, helpful not only in storing the default value, but also providing a tool-tip for reference as the user interacts with the page. It then assigns behaviors for both the onfocus and onblur events, eliminating the need to respecify data for comparison. The script is cleanly separated from the markup and, using jQuery, additional specifications may be made so as to only affect children of a particular FIELDSET or only those that possess a certain class.

I hope you find this snippet useful, and feel free to comment if you have additional information to share.

One interesting link is to an article about methods for presenting information and creating systems to enhance user experience:

Delivering informative structure is the primary task an interactive user interface should be able to cope with. The more intuitive layout structure is designed, the better users can understand the content.

Read the full article on Noupe.

Considering almost all the recent updates to the framework relate to improving speed, why not take fullest advantage of them in making your application as responsive as possible?

To this goal, Nick Stakenburg released a script that gently alerts the user that their browser could use an upgrade. Pushup detects the version of the client and briefly flashes a notice with a link to download an update. The entire package is fairly lightweight (only 11kb, zipped) and includes the images, sylesheets and JavaScript files to run. Implementation and customization information is provided on the download site, in addition to ports of the function for dojo and jQuery.

This doesn’t really help users whose IT departments prohibit them from updating, but if it helps those who are unaware that there is a better web experience to be had then it is worthy of praise and support.

First, jQuery makes finding the item(s) that you want to replace as easy as using CSS. Then, the jQuery sIFR Plugin does all the work of figuring out the text, files, sizes, colors, and any other configurations needed for the conversion. The jQuery sIFR plugin is fully configurable and can choose how little or how much you want to customize the display of the sIFRed text. Finally, the jQuery Flash Plugin does a most excellent job of embedding the sIFR flash into your web page. After all is said and done, you should have beautiful sIFR replaced text with consistent behavior across all major browsers.

All the resources are available for download from the developer’s site, as well a simple API and usage examples for easy customization.

Instead of:

1
2
3
4
5
6
7
8
9
10
11
12
13

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfels .length; i++)="" {="">
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</sfels>

You only need:

1
2
3
4
5

jQuery('#nav li').hover(function(){
 	$(this).addClass('sfhover'); //mouseover
 }, function(){
 	$(this).removeClass('sfhover'); //mouseout
 });

Such is the beauty of using css-style selectors to build an array of affected elements. Of course, you must make sure the code is wrapped in $(document).ready(function(){…});, but there is no need to modify the window.onload event in this example. Otherwise, refer to the code provided in the above examples to get your markup and formatting styles in place.