Search code examples
htmlcsstabindex

Tab index not working for some elements

I have form in which I have data picker, and select2 (customize drop down to search) and many inputs, text area fields when I press tab button to move the next field its working fine but when next field is date picker or select2 then tab index is not working I want generically solution and in all browsers. currently i am doing static solution like to get id of one div then Prop tab index with 1 value.

$scope.focusFunctionZipV = function(Id){
    var div = '#' + Id;
    $(div).prop('tabindex', '1');
    $(div).select2('open');
    //zipV is a div having zip code with select2
    if(div == '#zipV'){
        $('.datepicker-simple').prop('tabindex', '0');  
    }
}
Solution

  • You should get the id select2 ID then on close event refer focus to next field.

    $('#currentDiv').select2().on("select2:close", function (e) { 
    $('#nextDiv').focus()
});

    and for date picker 

    $('#ID').datepicker({
    onSelect: function(dateText, inst) {
        $('#nextIDdiv').focus();
    }    
});

    and for simple input fields tab is working fine.