CODEWITHSUNDEEP
javascriptjquerynavigationfocustabindex
user6515939
user6515939

Reputation: 63

Disable focus outside the page

I'm making a web-page based application which would have keyboard (a joystick) only navigation. I use tabindex, but I also need to disable focus on the address bar, search bar or anything else outside the page.

This app would be run only on one specific device, so it's okay (actually needed) to disable some functionality.

Is it possible?

Upvotes: 1

Views: 752

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33943

It was a cool problem to solve.

EDIT : Added the backward [shift]+[tab].

Try this script, (working Fiddle here):

var firstInputObj;
var lastInputObj;

$("input").each(function(){
    if($(this).attr("tabIndex")=="1"){
        firstInputObj=$(this);
    }
    lastInputObj=$(this);

});
$(firstInputObj).focus();

// tab (forward)
$(lastInputObj).on("keydown",function(e){
    if(!e.shiftKey && e.which==9){
        e.preventDefault();
        $(firstInputObj).focus();
    }
});

// Shift tab (backward)
$(firstInputObj).on("keydown",function(e){
    if(e.shiftKey && e.keyCode == 9) {
        e.preventDefault();
        $(lastInputObj).focus();
    }
});

Upvotes: 1

Related Questions