Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to lock focus in a Dialog?

I want to lock focus on TAB key press. So that it should remain in my Dialog until I click on close button. My JS code is mentioned below, but its not working. Can please anyone assist me to fix this?

$(function () {
    $("#confirmSubmit").keydown(function(e){
    if (e.which == 9 ) { //keycode for TAB
        e.preventDefault(); //stops the default behavior of moving focus to the back page
        $("#confirm").focus(); //moves focus to your first input button
    }
});
});

Code for Dialog:

// code for dialog
    <div style="display: none">
    <div aria-live="assertive" aria-describedby="Contentdiv" 
    role="dialog" id="completeReservationMain" >
                <div tabindex="-1"  id="Contentdiv">

                    <div  id="CompleteReservationContent"> 


                        <h2 tabindex="-1" class="help-layer-heading"> 

                           Print   </h2>


                        <div tabindex="-1" class="check-in-complete-help">
                            Are you sure to Submit?
                        </div>
                        <div class="center">
                            <span class="Button" id="Span1"><span class="ButtonInner">
                                <form method="get" target="_blank" action="/Print.aspx">
                                <input type="submit"  id="confirm" value="Print">
                                </form>
                            </span></span><span class="Button " id="Span2">
                                <span class="ButtonInner">
                                    <input type="submit" title="Submit" id="confirmSubmit" value="Continue Submit">  
                                </span></span>

                        </div>
                    </div>

                   </div>

Main Issue description: I have created a div having role of "dialog" type I want to lock focus on Tab Key press inside a dialog box. There is already Close button added in that dialog. Currently as soon as dialog opens my focus comes on first input button and then on TAB key press my focus moves to close button inside that dialog. Now third time when I press TAB key then focus moves to my back page's input element. That mean focus comes outside of that dialog. How can I lock my focus inside dialog so that until dialog is closed it do not move outside of it

like image 576
user4956321 Avatar asked Nov 10 '22 09:11

user4956321


1 Answers

Finally the same code working for me:

$(function () {
    $("#confirmSubmit").keydown(function(e){
    if (e.which == 9 ) { //keycode for TAB
        e.preventDefault(); //stops the default behavior of moving focus to the back page
        $("#confirm").focus(); //moves focus to your first input button
    }
});
});
like image 133
user4956321 Avatar answered Nov 15 '22 05:11

user4956321