locked
tab not focus/select datepicker image RRS feed

  • Question

  • User364607740 posted

    I have a form with multiple textboxes and datepicker. When I do tab, the cursor goes from one text box to another textbox but the datepicker image is not selected with tab.

    I've to use mouse to select the datepicker. How can I solve this problem ?

    <div class="form-group">
                                        <label>Date Of Birth</label>
                                       <asp:TextBox ID="txtDOB" runat="server" CssClass="txt-control" />
                                        <asp:Image ID="calendarImg1" runat="server" ImageUrl="~/images/calendar_month.gif"
                                            Style="cursor: pointer" />
                                        <ajaxToolkit:CalendarExtender ID="CAL" runat="server" Format="yyyy-MM-dd" PopupButtonID="calendarImg1"
                                            TargetControlID="colDateFrom" CssClass="calender" />
                                    </div>

    Friday, February 19, 2016 10:57 AM

Answers

  • User2006494427 posted

    Set a TabIndex on the image.

    <asp:Image ID="calendarImg1" runat="server" ImageUrl="~/images/calendar_month.gif"
                                            Style="cursor: pointer" TabIndex = "1" />

    A TabIndex specifies the order in which users can tab through the controls on the page. The default value is 0, which indicates that the TabIndex has not been set. Read more here and here.

    Images, by default I believe, are not tabbable.

    Abhishek

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, February 21, 2016 8:56 PM

All replies

  • User2006494427 posted

    Set a TabIndex on the image.

    <asp:Image ID="calendarImg1" runat="server" ImageUrl="~/images/calendar_month.gif"
                                            Style="cursor: pointer" TabIndex = "1" />

    A TabIndex specifies the order in which users can tab through the controls on the page. The default value is 0, which indicates that the TabIndex has not been set. Read more here and here.

    Images, by default I believe, are not tabbable.

    Abhishek

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, February 21, 2016 8:56 PM
  • User61956409 posted

    Hi scala_1988,

    I agree with Abhishek. you could specify tabindex attribute for your controls to specify the tab order. The following simple sample is for your reference.

    <table>
        <tr>
            <td>TabIndex="1"</td>
            <td>
                <asp:TextBox ID="TextBox1" runat="server" TabIndex="1"></asp:TextBox></td>
        </tr>
        <tr>
            <td>TabIndex="4"</td>
            <td>
                <asp:TextBox ID="TextBox3" runat="server" TabIndex="4"></asp:TextBox></td>
        </tr>
        <tr>
            <td>TabIndex="3"</td>
            <td>
                <img src="../../Images/orderedList0.png" tabindex="3" /></td>
        </tr>
        <tr>
            <td>TabIndex="2"</td>
            <td>
                <asp:TextBox ID="TextBox2" runat="server" TabIndex="2"></asp:TextBox></td>
        </tr>
    </table>
    

    Best Regards,

    Fei Han

    Tuesday, February 23, 2016 5:45 AM