Search code examples
javascriptasp.nettextboxfocusdom-events

javascript .focus() to operate with tab


For some reason none of my setfocus() events were working on the server side of my web app, so I created a Javascript function setfocus that is set to trigger on the onload event of the body tag.

<body onload="SetFocus()">

The user will click a radio button which enables the drop down. they select from the drop down which enables the textbox. When they scan a barcode into the textbox it will automatically tab out of the field, therefore triggering the onchange event to call some server side code which, if a successful SQL insert is completed, will insert a new row to the gridview, and it should set focus automatically back to the textbox via Javascript. Once that gridview object has more than a header and a row of data, I disable the drop down and radio button list, so if you look at the Javascript below, I can't use those as criteria in my if statement anymore.

Javascript:

 var MatAllRB = document.getElementById("HF_RB_MatAll").value;
 var MatAllCL = document.getElementById("DD_SelectCL_All").value;
 var MatAll = document.getElementById("Txt_MatBC_All");
 var MatAllPrompt = document.getElementById("HF_AllPrompt").value;
 var count = $("#GV_Scan_All tr").children().length;
        

This works perfectly:

else if (ActiveTab == "cont-3" && MatAllRB != "" && MatAllCL != "")
    {   alert("went into setfocus");
        document.getElementById("Txt_MatBC_All").focus();
        alert("made it through setfocus");
    }

This only works if you actually click off the field, the tab doesn't work. It just does nothing.

else if (ActiveTab == "cont-3" && count == 9)
    {   alert("went into setfocus");
        document.getElementById("Txt_MatBC_All").focus();
        alert("made it through setfocus");
    }

This does the same thing as the above:

else if (ActiveTab == "cont-3" && (MatAllPrompt == "RP" || MatAllPrompt == "P03"))
    {   alert("went into setfocus");
        document.getElementById("Txt_MatBC_All").focus();
        alert("made it through setfocus");
    }

The weird thing is that all of these alerts that I have in here show up correctly, it just never sets focus. I am pretty new at this stuff still, so maybe I'm missing something, but I can't figure out why the focus() will work for click off rather than tabbing off. Any help would be appreciated.

Here's the HTML:

    <asp:RadioButtonList runat="server" ID="RB_Mat_All" AutoPostBack="true" RepeatColumns="4" OnSelectedIndexChanged="RB_Mat_All_OnSelectedIndexChange">
    <asp:ListItem Text="NC" value="NC"></asp:ListItem>
    <asp:ListItem Text="DA" value="DA"></asp:ListItem>
    <asp:ListItem Text="GW" value="GW"></asp:ListItem>
    <asp:ListItem Text="PC" value="PC"></asp:ListItem>
</asp:RadioButtonList>
<asp:HiddenField runat="server" ID="HF_RB_MatAll"></asp:HiddenField >
<br />
<asp:DropDownList runat="server" ID="DD_SelectCL_All" AutoPostBack="true" OnSelectedIndexChanged="DD_SelectCL_All_OnSelectedIndexChange">
    <asp:ListItem Value="" Text="Select..."></asp:ListItem>
    <asp:ListItem value="53" text="05"></asp:ListItem>
    <asp:ListItem value="54" text="06"></asp:ListItem>
    <asp:ListItem value="55" text="07"></asp:ListItem>
    <asp:ListItem value="57" text="08"></asp:ListItem>
    <asp:ListItem value="58" text="09"></asp:ListItem>
</asp:DropDownList>
<asp:label runat="server" ID="Lbl_All_Prompt" CssClass="Form" Text=""></asp:label>
<asp:HiddenField runat="server" ID="HF_AllPrompt"></asp:HiddenField >
<asp:TextBox runat="server" ID="Txt_MatBC_All" Cssclass="Form" Text="" AutoPostBack="true" OnTextChanged="Txt_MatBC_All_TextChanged"></asp:TextBox>
<asp:GridView runat="server" ID="GV_Scan_All" CssClass="Form_Feedback"></asp:GridView>

When I view the source the textbox looks like this:

<input name="Txt_MatBC_All" type="text" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;Txt_MatBC_All\&#39;,\&#39;\&#39;)&#39;, 0)" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" id="Txt_MatBC_All" class="Form" />

Solution

  • It's odd that you can click off the field and it works, but tabbing off doesn't. Try adding tabIndexes to the inputs on your page.