javascript - How to lock focus in a Dialog? -


i want lock focus on tab key press. should remain in dialog until click on close button. js code mentioned below, not working. can please assist me fix this?

$(function () {     $("#confirmsubmit").keydown(function(e){     if (e.which == 9 ) { //keycode tab         e.preventdefault(); //stops default behavior of moving focus page         $("#confirm").focus(); //moves focus first input button     } }); }); 

code dialog:

// code 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">                             sure 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: have created div having role of "dialog" type want lock focus on tab key press inside dialog box. there close button added in dialog. dialog opens focus comes on first input button , on tab key press focus moves close button inside dialog. third time when press tab key focus moves page's input element. mean focus comes outside of dialog. how can lock focus inside dialog until dialog closed not move outside of it

what interesting question. created tiny jquery plugin - see jsfiddle: https://jsfiddle.net/chs7x8vh/

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

basically hijacks tab keypress , if pressed on last item of collection go first.

created github repository this. if work on this, might commit >> https://github.com/gottwik/jquery-tabloop


Comments