Tabindex only on form elements inside the opened modal window

[vodkabears]

Tabindex only on form elements inside the opened modal window

[vodkabears]

@martinpesout the way like this i think:

$(document).on('open', '.remodal', function () {
    $('input').attr('tabindex', "-1");
    $('.modal-form input').each(function(index, input) {
        input.tabIndex = index + 1;
    });
});

$(document).on('close', '.remodal', function () {
    $('input').each(function(index, input) {
        input.tabIndex = index + 1;
     });
});

I don't know maybe the code above is too complicated, but i think it should work. Anyway look at remodal's events like close, open and etc. You can check them here: https://github.com/VodkaBears/Remodal#events

[martinpesout]

Yeah, you are right. I think that it could be solution. But it's necessary to include other form field elements. And also it's important to call next definition during open event.

$('.modal-form').find('input select textarea').first().focus();

[vodkabears]

yep.

[PradeepNair1988]

Hi ,

I encountered the same issue and below logic helped me to resolve the issue.

// On the open of Modal window
//Updating the tabindex value to another attribute and make the tabindex =-1 which is the background
var inputs = $(document).find('select, input, textarea, button, a').filter(':visible');
$(inputs).each(function(){
var tbindex=$(this).attr("tabindex");
$(this).attr("data-index",tbindex);
$(this).attr("tabindex",-1);
});
// On the close of Modal window
//Re-update the tabindex value to from the attribute which you have set when you are opening the modal window.
var inputs = $(document).find('select, input, textarea, button, a').filter(':visible');
$(inputs).each(function(){
var tbindex=$(this).data("index");
if(tbindex){
$(this).attr("tabindex",tbindex);
}
});