So inside the domready event I simply did:

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

function inputify(elem) {
    elem.focus();
    elem.addEvents({
        'keydown': function(event) {
            if (event.key === 'backspace' && !elem.value) {
                history.back();
            }
        }
    });
}
 
inputify( $('SomeInputfieldById') );

Great, reusable, everthing works fine. Ok, so let’s incorporate my ideas from my HTML forms and onclick/onfocus post (basically, select on click instead of focus and pre-fill the input field):

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

function inputify(elem) {
    var startvalue = elem.value;
    elem.select();
    elem.addEvents({
        'keydown': function(event) {
            if (event.key === 'backspace' && elem.value === startvalue) {
                history.back();
            }
        },
        'click': function() {
            elem.select();
        }
    });
}
 
inputify( $('SomeInputfieldById') );

Great works fine. Remember pre-filled value and only go back in history when the user hasn’t changed it. Done.

Wait… oh, noes! The backspace button is supposed to delete the input. Now, most users will unwillingly trigger the history back function. That’s as broken as it gets… Well, in theory I could focus the input field instead of selecting it, and use something like caretPos, and only go back in history if it’s at the start… But that’s not what I had in mind (well not sure what I was thinking anyway…)

So I consider this technique unusable for the time being for my own sites. The only times I focus some input field onload is for search functions anyway. There, I’d rather annoy a few users and improve the overall usability of the site. Like Harmen said in his post, don’t use onload input focus just because you can

When the user clicks into the field you’ll want to remove the clue. The obvious way to do this is to add an onclick JavaScript command:

<form>
    <input onclick="this.value=''" type="text" value="Your email" />
</form>

The user can still access the input field through other means than clicking. He can use the tab key for example. That’s why usually the onfocus event is more useful:

<form>
    <input onfocus="this.value=''" type="text" value="Your email" />
</form>

This seems to work nicely. However there’s still a problem. When a user fills in his email address, reads a little more on your site and clicks the input field again, his address will be removed again! So to make sure this doesn’t happen we add a little check for the content of the field:

<form>
    <input type="text" value="Your email" onfocus="if (this.value == 'Your email') {this.value=''}" />
</form>

And here it is:

Restore default value if nothing is entered

Ok, now this is working. However, when your visitor decides not to input any data, the field stays empty. If you have no label for the input he or she might forget what the field was for. We fix this by restoring the default value when the input field is left:

<form>
    <input type="text" value="Your email" onblur="if(this.value == '') { this.value='Your email'}" onfocus="if (this.value == 'Your email') {this.value=''}" />
</form>

Thanks to Ray for his example linked in the comments.

Select onclick

But sometimes this isn’t the best solution. It could be more desirable to highlight the content of the input field if you’re offering some kind of search. The user may not want to start a new search but to modify the existing one.

By highlighting the input field the user can choose to either empy it by starting to type or to modify it by using the arrow keys.

<form>
    <input onfocus="this.select()" type="text" value="Your previous searcj" />
</form>

Dynamic input color

This is a little advanced. Let’s assume you want the default value to be in a different color and change it onclick. This is one working solution:

<form>
    <input style="color: #f00" type="text" value="Your email" onblur="if(this.value == '') { this.style.color='#f00'; this.value='Your email'}" onfocus="if (this.value == 'Your email') {this.style.color='#0f0'; this.value=''}" />
</form>

Keep in mind that this might create problems when you reload the page. Some browsers will remember the value of the input field, and the color will be different even though the field does not contain the default value. Fixing that is beyond the scope of this post. See onload and domready events.