TABINDEX不使用选择变为隐藏

的元件之后正确的顺序我有3个输入与tabindex 1，2，和3。如果我把我的在所述第一（搜索）光标框和标签，一切正常进行。

但是，如果我选择其中一个叠加/下拉元素，当我将鼠标移到搜索框然后点击选项卡时，我将移动到第三个tabindex输入。

我注意到的一件事是document.activeElement成为body元素后，我选择了下拉菜单中的一个项目。即使如此，我不明白为什么它会移动到第三个元素，而不是下一个。

2017-02-17 diplosaurus

只需添加tabindex="1"到内部的div也（Standalone）：

var app = angular.module('binner', []); 

app 

.controller('MainCtrl', function() { 

}) 


.directive('picker', function($document, $rootScope) { 
    return { 
     restrict: 'E', 
     scope: {}, 
     template: 
      ['<input tabindex="1" ng-model="picker.current.name" ng-focus="picker.open($event)" required="required" ng-model="picker.searchText" ng-model-options="{debounce: 333}" placeholder="Search" autocomplete="off" />', 
      '<div ng-show="picker.isOpen" class="overlay">', 
       '<div tabindex="1" ng-click="picker.chooseItem(i)" ng-repeat="i in picker.items">{{i.name}}</div>', 
      '</div>'].join(''), 
     controller: PickerCtrl, 
     controllerAs: 'picker', 
     link: pickerLink, 
    }; 

    function pickerLink(scope, iEl) { 
     var picker = scope.picker; 

     picker.open = openDropdown; 
     picker.close = closeDropdown; 

     ////////////////////////////////////////// 

     function openDropdown() { 
      $document.bind('click', closeDropdown); 
      picker.isOpen = true; 
     } 

     function closeDropdown(e) { 
      if(e === undefined || !iEl[0].contains(e.target)) { 
       $document.unbind('click', closeDropdown); 
       picker.isOpen = false; 

       if(!$rootScope.$$phase) { 
        scope.$digest(); 
       } 
      } 
     } 
    } 
}); 


function PickerCtrl() { 
    this.items = [{name: 'first'}, {name: 'second'}, {name: 'third'}]; 

    this.chooseItem = function(item) { 
     this.current = item; 

     this.close(); 
    }; 
}

https://jsbin.com/bukolayuhe/1/edit?html,js,output

来源

2017-02-17 00:20:52

TABINDEX不使用选择变为隐藏

回答

相关问题