Question

I’ve pieced together some code to use in ASP.NET to prevent controls from losing focus on postback so a tab OR click of another control saves the users position and returns it.

In Page_Load I have the following:

PartNum_tb.Attributes["onfocus"] = "gotFocus(this)";
Department_tb.Attributes["onfocus"] = "gotFocus(this)";
PartWeight_tb.Attributes["onfocus"] = "gotFocus(this)";
Standard_rb.Attributes.Add("onfocus","gotFocus(this)");
Special_rb.Attributes.Add("onfocus","gotFocus(this)");

if (Page.IsPostBack)
   Page.SetFocus(tabSelected.Value);

This is my Javascript (tabSelected is a hidden field):

<script type="text/javascript">
    function gotFocus(control) {
        document.getElementById('form1').tabSelected.value = control.id;

        if (control.type == "text") {
            if (control.createTextRange) {
                //IE  
                var FieldRange = control.createTextRange();
                FieldRange.moveStart('character', control.value.length);
                FieldRange.collapse();
                FieldRange.select();
            }
            else {
                //Firefox and Opera  
                control.focus();
                var length = control.value.length;
                control.setSelectionRange(length, length);
            }
        }
    }
</script>

The problem is when I tab or click onto one of the radio buttons, it returns focus to whatever the last control was instead which is unintuitive and confusing to a user. It does this because the RadioButton never gets focus, therefore the cursor position doesn’t get updated. After extensive Google searching it appears that its not really possible to know when a RadioButton gains focus. Is there any solution known to even just work around this problem?

Answer 1

A solution may be adding a keypress event to the previous field and use the click event on the radios. Also, move the control.focus(); out of the if statement:

Javascript

function changeFocus(next) {
    gotFocus(next);
}

function gotFocus(control) { 
    document.getElementById('form1').tabSelected.value = control.id; 
    control.focus();

    if (control.type == "text") { 
        if (control.createTextRange) { 
            //IE   
            var FieldRange = control.createTextRange(); 
            FieldRange.moveStart('character', control.value.length); 
            FieldRange.collapse(); 
            FieldRange.select(); 
        } 
        else { 
            //Firefox and Opera   
            var length = control.value.length; 
            control.setSelectionRange(length, length); 
        } 
    } 
}