How to set tabIndex for bootstrap login control in ASP.Net

Last Reply on Nov 17, 2015 02:48 AM By dharmendr

Posted on Nov 09, 2015 05:36 AM

Hi, I am working on popup window that is using asp.net controls. As usually happens that when we click on Tab keyword of Laptop then it takes us to the next tab of controls on browser. But in my bootstrap popup i am unable to set tabindex. I have used asp.net Tablndex property but it is not working on popup window. Kindly help me out.

Posted on Nov 09, 2015 07:50 AM Modified on 8 months ago

Hi MMP,

I have created one sample please check. I have given TabIndex=1 for Email, TabIndex=3 for Password, TabIndex=2 for SignIn and TabIndex=4 for SignUp.

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
    rel="stylesheet">
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container
    <div class="row header" style="text-align: center; margin-top: 40px;">
        <a href="#" data-toggle="modal" data-target="#LoginModal">Login</a>
    </div>
    <div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times; </span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        Login</h4>
                </div>
                <div class="modal-body">
                    <div class="input-group">
                        <span class="input-group-addon">@</span>
                        <asp:TextBox runat="server" class="form-control" placeholder="Email" TabIndex="1"></asp:TextBox>
                    </div>
                    <p>
                    </p>
                    <div class="input-group">
                        <span class="input-group-addon">@</span>
                        <asp:TextBox runat="server" class="form-control" TextMode="Password" placeholder="Password"
                            TabIndex="3"></asp:TextBox>
                    </div>
                    <p>
                    </p>
                    <asp:Button Text="SignIn" runat="server" class="btn-primary" TabIndex="2" />
                    <asp:Button Text="SignUp" runat="server" class="btn-primary" TabIndex="4" />
                </div>
                <div class="modal-footer">
                    <asp:Button Text="Close" runat="server" data-dismiss="modal" class="btn btn-default" />
                </div>
            </div>
        </div>
    </div>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html