How to lock focus in a dialog?

Question

I want to lock the focus on pressing the TAB key. So that he remains in my dialogue, I do not press the close button. My JS code is listed below, but it does not work. Can someone help me 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 dialogue:

// 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>

. div, "dialog". Tab . ​​ "". , , , TAB , . , TAB, . , . , , , .

Answer 1

, :

$(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
    }
});
});

Answer 2

. jquery - . Jsfiddle: https://jsfiddle.net/chs7x8vh/

$.fn.tabloop = function() {
    var p = {
        collection: this
    };    
    $(this).keydown(p, function(e) {
        if($(e.currentTarget)[0] == e.data.collection.last()[0]){
            e.data.collection.first().focus();
            e.preventDefault();
        }
    })
};

$(".tabloop1").tabloop();

, , .

github. - , → https://github.com/Gottwik/jquery-tabloop

Answer 3

I created a simple example on top of what you have already done, and it works. It's not entirely clear why this is not for you, though.

https://jsfiddle.net/k5a21wk2/

I basically fix the tab on the last element in the dialog box and focus it on the first in it.

Also, I don’t think you should give tabindex="-1"for divand h2since they are not configurable by default.