Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
mworldmworld 

Focus Setting

I have several custom pages where I'm having an annoying issue with my inputField calendar widget being open when the page loads. This field is the only text input field on the page and automatically receives the focus (see below).

Here's my InputField code:

Code:
<apex:inputField id="Date" onFocus="setNamedFocus(document.forms[0].elements[0])" required="true" value="{!Staff_IP__c.Assigned__c}"/>

And this is what SF does to it:

Code:
<input  id="j_id0:newIPForm:j_id2:Date" name="j_id0:newIPForm:j_id2:Date" onfocus="DatePicker.pickDate(false, 'j_id0:newIPForm:j_id2:Date', false);" size="12" type="text" value="4/28/2008" />

The Source code shows that the Calendar widget is coded to open and select a date when it receives focus. It shows that a calendar widget is a text field under the covers. It also shows that my attempts to directly call elementFocus(element) or setNamedFocus(element_name) in functions.js to explicitly re-direct the focus to one of the other controls (a checkbox and a select list) were completely ignored.

This shows that by default the page is coded to set Focus to the first available text input field onLoad.

Code:
<body onLoad="if (this.bodyOnLoad) bodyOnLoad();" <snip> >

function bodyOnLoad() {
 setFocusOnLoad();
        <snip>
}

function setFocusOnLoad() {
    if (!beenFocused) { setFocus(); }
}

function setFocus() {
    // search for a tabIndexed field to focus on
    for(var firstIndex=1; firstIndex < 5; firstIndex ++ ){
        var nextIndex = firstIndex;
        for (var frm = 0; frm < document.forms.length; frm++) {
            for (var fld = 0; fld < document.forms[frm].elements.length; fld++) {
                var elt = document.forms[frm].elements[fld];
                if ( elt.tabIndex != nextIndex) continue;
                if ((elt.type == "text" || elt.type == "textarea" || elt.type == "password") && !hiddenOrDisabled(elt)
                   && elt.name != "sbstr" &&  elt.name.indexOf("owner") != 0 && elt.name.indexOf("tsk1") != 0 && elt.name.indexOf("evt1") != 0) {
                    elt.focus();
                    if (elt.type == "text" && !hiddenOrDisabled(elt)) {
                        elt.select();
                    }
                    return true;
                } else {
                    nextIndex++;
                    fld = 0;
                }
            }
        }
    }

    // failed to find a tabIndexed field, try to find the field based on it's natural position.
    // TODO: is this even needed anymore—
    for (var frm = 0; frm < document.forms.length; frm++) {
        if (document.forms[frm].name != "sbsearch" && document.forms[frm].name != "srch_solution_sbar" &&
            document.forms[frm].name != "srch_product_sbar" && document.forms[frm].name != "srch_document_sbar") {
            for (var fld = 0; fld < document.forms[frm].elements.length; fld++) {
                var elt = document.forms[frm].elements[fld];
                // skip buttons, radio, or check-boxes
                // to skip "select" types, remove from if statement
                if ((elt.type == "text" || elt.type == "textarea" || elt.type == "password") && !hiddenOrDisabled(elt) &&
                     elt.name.indexOf("owner") != 0 && !hiddenOrDisabled(elt)) {
                    elt.focus();
                    // select text in text field or textarea
                    if (elt.type == "text" && !hiddenOrDisabled(elt)) {
                        elt.select();
                    }
                    return true;
                }
            }
        }
    }

    return true;
}

Does anyone know how to override the focus setting without throwing out VF entirely and writing an entirely hand coded page?

Mauricio

werewolfwerewolf
This field is the only text input field on the page

So what happens if you put another input field above it in a hidden div?
mworldmworld
Code:
<DIV STYLE="display:none"><INPUT TYPE="text" ID="Empty" SIZE="5" VALUE=""></DIV>

 
Makes no difference. Works if STYLE="display:inline", but of course I don't want to see the field.
 
Mauricio
werewolfwerewolf
What about a hidden input (i.e. INPUT TYPE="HIDDEN")?  Can a hidden input have focus?
werewolfwerewolf
Also, can't you just override the setFocus() method?  If you redefine it I believe JS will take whatever is defined last, which would likely be your method.
mworldmworld

Hidden field doesn't work either.

Redefine setFocus()? You mean write a local version by the same name? Hmm. I'll look into that.
mworldmworld
Thanks werewolf. That worked like charm. I can see where that could come in handy for other things too. Thanks!