Now I've discovered a similar collection of articles by Peter Michaux. They often riff on Crockford's ideas, sometimes offering a fresh perspective and sometimes explaining things in a more accessible way. Well worth a read for aspiring JavaScript ninjas.

Simply include this code (and jQuery, of course) on your page, and assign the placeholder text as the title attribute of the control. Example:

<input type="text" name="keywords" title="Search" />

The script also assigns the class placeholder to the control when the placeholder text is present, so you can style it differently if you like (for example, you may wish to gray out the text).

The code:

/**
 * Unobtrusively set up placeholder behaviors on all text inputs for which
 * the title attribute has been set. The title text will be used as the
 * placeholder text.
 * @author Travis Miller
 * @link http://www.electrumdigital.com/
 */
$( function() {
 
    $("input[type=text][title],textarea[title]")
        .each( showPlaceholder ) // initialize each control on page load
        .blur( showPlaceholder )
        .focus( hidePlaceholder );
 
    $("form").submit( function() {
    	$( "input[type=text][title],textarea[title]", this ).each( hidePlaceholder );
    } );
 
    function showPlaceholder() {
    	var $control = $(this);
        var placeholderText = $control.attr("title");
        if ( $control.val() === "" || $control.val() === placeholderText ) {
        	$control.addClass("placeholder");
            $control.val(placeholderText);
        }
    };
 
    function hidePlaceholder() {
    	var $control = $(this);
        if ( $control.val() === $control.attr("title") ) {
        	$control.removeClass("placeholder");
        	$control.val("");
        }
    }
 
} );

Of course, the target attribute is illegal in XHTML Strict—so this bit of functionality of will invalidate your pages.

I whipped up a simple fix to this problem. Here's the demo and download page.

• You probably already know about the Web Developer Toolbar, but if you don't, trust me—go download it now.

  Its most valuable feature is the ability to view the generated source of a page—that is, to see the HTML as it exists at the current moment, including any changes that have been made via JavaScript. It's absolutely indispensible for any kind of AJAX-ish work.

  It can do a lot more than that, though—with a couple of clicks, you can validate documents, see what your page looks like at different resolutions, quickly view or delete cookies from only the current domain or path, view overlays which reveal various aspects of the document (such as the names of form fields or information about links), disable images or CSS, autopopulate forms to accelerate testing, and much more.

• JSView. How many times have you needed to view the stylesheets or JavaScript files that are used on a page—and had to hunt through the page source for the filenames, so you could cobble them together to get a complete URL?

  JSView adds a submenu to the context menu which lists all stylesheets and JavaScript files linked to a page, along with the file sizes. Selecting a file from the menu will display the source in a new window. What JavaScript library are they using on that page? How did they get that effect with CSS? JSView makes it easier than ever to find out.

• Live HTTP Headers. Very handy when you want to see exactly what the browser and the server are saying to each other—complete with HTTP status codes, POST data, and request and response headers.

  It's helped me to diagnose obscure bugs, to understand the workings of third-party web applications (such as when working with Microsoft products, which tend to freak out if the headers aren't set exactly as expected), to discover the URLs of embedded media files so I can download them (even on sites which obfuscate the URLs through various means), and more.

In short, IE 6 and 7 insist on putting a border around horizontal rules, no matter how you set up your stylesheet.

Scott offers a simple but elegant solution which relies on jQuery. That's fine if you're already using jQuery in your project, but if you're not, it's hard to justify the extra payload to fix a simple cosmetic issue.

I've written a standalone version of Scott's script. At less than 350 bytes, it's a very lightweight solution, and it's easy to implement. Here's a demo page. As Scott's post explains, it simply replaces all <hr /> elements with <div class="iehrfix"></div> in the affected versions of IE.

Instructions:

1. Mark up your pages with semantically correct <hr /> tags.
2. Style the horizontal rules however you like in your default stylesheet. (You'll probably be using a background image.)
3. Prepare a second stylesheet, which we'll feed only to IE by using conditional comments. It should contain two rules: one which sets display: none; on all <hr /> elements, and one which describes alternate rules for div.iehrfix. You can use the demo stylesheet as a starting point.
4. Download iehrfix.js.
5. Place the following code in the <head> of your document:

   <!--[if(IE 6)|(IE 7)]>
       <link rel="stylesheet" type="text/css" href="/path/to/iehrfix.css" />
       <script type="text/javascript" src="/path/to/iehrfix.js"></script>
   <![endif]-->

That's it! Browsers other than IE 6 and 7 will completely ignore the added code. IE 6 and 7 will execute it on page load; if JavaScript is disabled, <hr /> elements will simply be hidden altogether. (IE 8 handles horizontal rules correctly, and doesn't need the fix.)

• Minified (850 bytes)
• Uncompressed

It behaves identically to PHP's str_pad() function, and has been unit tested in Firefox 3, Safari 3, Chrome, IE6, and IE7.

It's optimized for speed, not readability. (It processes 500 sets of randomly generated parameters in less than 50ms in all of the above-listed browsers on my 3.0GHz Pentium 4, and less than 100ms in IE6 on my aging Toshiba notebook.)

Syntax:

foo.pad( padLength [, padString = " " [, padType = "right" ] ] );

...where foo is any String object.

padType must be one of "left", "right", or "both". Otherwise, the parameters are identical to those for str_pad().

Surprisingly, this is the first library I've seen whose sole purpose is JavaScript version compatibility. Andrea says it provides "a quite totally standard environment", and offers some unit tests.

I haven't used it yet, but it's a cool idea.

Note that JSL does not include the JavaScript 1.8 methods Array.reduce() and Array.reduceRight(). If you need those, try the compatibility code offered by Mozilla, here and here.