How do I make page elements appear around the control with the focus?

Question

When the user sets the focus to an edit control on my HTML page, I want some other text to appear "around" it, to give some hints for how to fill out the edit control, and some buttons to fill it with random data. What's the best way to do this with javascript or jquery or whatever?

Thanks.

Answer 1

You can hook the focus and blur events of the control, and use them to show and hide the elements you want to show and hide.

Example 1 - Unobtrusive

You can do this without putting Javascript in your markup by using IDs and DOM methods. For instance, given this markup:

<input type='text' id='userNameField' name='userNameField'>
<span style='display: none' id='userNameFieldHelp'>
User names may contain the characters A-Z, 0-9, and _.
</span>

You can hook the events using your favorite Javascript library ( jQuery , Prototype , Closure , etc., etc.). Or here's a lame example not using any of them:

window.onload = pageInit;
function pageInit() {
    var field = document.getElementById('userNameField');
    field.onfocus = fieldFocus;
    field.onblur = fieldBlur;
}

function fieldFocus() {

    handleHelp(this.id, true);
}

function fieldBlur() {

    handleHelp(this.id, false);
}

function handleHelp(fieldId, show) {
    var span;

    if (fieldId) {
        span = document.getElementById(fieldId + "Help");
        span.style.display = show ? 'inline' : 'none';
    }
}

I wouldn't literally do it that way (I'd generalize things, use a library to make it easy to look things up by attribute, use an attribute to relate things rather than IDs and a naming convention, etc., etc.), but you get the idea.

Example 2 - Unobtrusive and general, using Prototype

Just by way of example, here's an approach using Prototype which is much more generic. A field and its help are related by the field name and the help element's data-help-for attribute.

HTML:

<input type='text' name='userNameField' class='helpable'>
<span style='display: none' data-help-for='userNameField'>
User names may contain the characters A-Z, 0-9, and _.
</span>

Javascript:

document.observe('dom:loaded', pageInit);
function pageInit() {
    var list;

    // Get a list of all "helpable" fields
    list = $$('.helpable');

    // Watch for focus and blur
    list.observe('focus', handleHelp.curry(true));
    list.observe('focus', handleHelp.curry(false));
}
function handleHelp(show) {
    var help;

    // Get all of the elements that are help for this field
    help = $$('*[data-help-for=' + this.name + ']');

    // Show/hide all of them
    help.invoke(show ? 'show' : 'hide');
}

Example 3 - Intermixed and fragile

Just to show a range of options, you can also intermix your Javascript and HTML, and use relative methods (which are more fragile — if you change your display slightly, you can break things pretty easily). But:

HTML:

<input type='text' id='userNameField' name='userNameField'
    onfocus='handleHelp(this, true)'
    onblur='handleHelp(this, false)'
>
<span style='display: none' id='userNameFieldHelp>
User names may contain the characters A-Z, 0-9, and _.
</span>

Script:

function handleHelp(element, show) {
    var span;

    // Find the next span
    for (span = element; span; spen = span.nextSibling) {
        if (span.nodeType == 1 && span.tagName == 'SPAN') {
            break;
        }
    }

    // Show or hide it
    if (span) {
        span.style.display = show ? 'inline' : 'none';
    }
}

But again, the above is very fragile to the structure — put in another span for whatever reason between the field and its help, and the wrong one gets shown/hidden.

Answer 2

In jQuery, you use .focus() . This will allow you to attach to the focus event of the control, then you can make any updates you want in the event handler.

There is also a counter-part blur event that occurred when focus has left the control.