仅在模态窗格中保留制表符 [英] Keep tabbing within modal pane only

问题描述

在我目前的项目中，我们有一些模式窗格可以打开某些操作。我正在尝试获取它，以便当该模式窗格打开时，您不能选中它之外的元素。 jQuery UI对话框和Malsup jQuery块插件似乎是这样做的，但我试图获得这一功能并将其应用到我的项目中，并且它对我来说并不是显而易见的。

On my current project we have some modal panes that open up on certain actions. I am trying to get it so that when that modal pane is open you can't tab to an element outside of it. The jQuery UI dialog boxes and the Malsup jQuery block plugins seem to do this but I am trying to get just that one feature and apply it in my project and it's not immediately obvious to me how they are doing that.

我看到有些人认为tabb不应该被禁用，我可以看到这个观点，但我被指示禁用它。

I've seen that some people are of the opinion that tabbing shouldn't be disabled and I can see that point of view but I am being given the directive to disable it.

推荐答案

这只是扩展基督徒的答案，通过添加额外的输入类型，并考虑到shift +选项卡。

This is just expanding on Christian answer, by adding the additional input types and also taking into consideration the shift+tab.

var inputs = $element.find('select, input, textarea, button, a').filter(':visible');
var firstInput = inputs.first();
var lastInput = inputs.last();

/*set focus on first input*/
firstInput.focus();

/*redirect last tab to first input*/
lastInput.on('keydown', function (e) {
   if ((e.which === 9 && !e.shiftKey)) {
       e.preventDefault();
       firstInput.focus();
   }
});

/*redirect first shift+tab to last input*/
firstInput.on('keydown', function (e) {
    if ((e.which === 9 && e.shiftKey)) {
        e.preventDefault();
        lastInput.focus();
    }
});

这篇关于仅在模态窗格中保留制表符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！