Question

我们可以在使用tab关键字进行焦点时打开下拉列表。我想在使用标签导航时打开下拉列表。

示例如果我在输入字段（焦点到输入字段）然后如果我按Tab键焦点转到按钮然后下拉，这里我想打开下拉列表这是我的代码 http://codepen.io/anon/pen/RGKKrd?editors=1010

angular.module('app',[ ]).directive('abc',function(){
  return {
        restrict: 'EA',
        link: function (scope, element ,attr) {
            element.on('keydown', function (evt) {
                if (evt.which ===9) {
                   // evt.preventDefault();
                }
            });
        }
  }
})

Answer 1

您无法以编程方式打开select

请参阅here和here

如果您正在寻找解决方法 here ，那就是我所做的。使用select box导航至tab key，然后选择您的option。只要在select中，focus就会保持开放状态。它在focusout

结束

这是指令

angular.module('app',[ ]).directive('abc',function(){
  return {
        restrict: 'EA',
        link: function (scope, element ,attr) {

            element.on('keyup', function (evt) {
                if (evt.which ===9) {
                  var length = element.find("option").length;
                  element.attr("size",length);
                  //element.attr("size",0);
                }
            });

            element.on('keydown', function (evt) {
                if (evt.which ===9) {
                  var length = element.find("option").length;
                  element.attr("size",0);
                  //element.attr("size",0);
                }
            });

        }
  }
})

不是最好的解决方案，但接近您所寻找的目标。

Answer 2

你做不到，但是你可以使用一些代码来解决这些问题。您可以像这样更改您的Js代码。

  angular.module('app',[ ]).directive('abc',function(){
   return {
    restrict: 'EA',
    link: function (scope, element ,attr) {
        element.on('keydown', function (evt) {
          if (evt.which ===9) {
            //debugger;
            if(document.activeElement.localName==="select"){
                        angular.element(document.activeElement).attr("size",1);
             }
            if(document.activeElement.nextElementSibling!==null && document.activeElement.nextElementSibling.localName==="select"){
            angular.element(document.activeElement.nextElementSibling).attr("size",document.activeElement.nextElementSibling.childElementCount);
            }

            }
        });

    }
  }
 })

这不是一个合适的解决方案，只是一种解决方法

如何打开角度js下拉？

2 个答案: