如何将焦点设置到 'editableCellTemplate' 中使用的自定义指令中的文本字段？

Question

我在 editableCellTemplate 中有一个自定义指令，每当我 select 文本单元格得到 selected 并且当我按下 "F2" 或双击它时单元格显示自定义指令，但指令内的文本字段未获得焦点。

如何将焦点设置到自定义指令内的文本字段中？

查看 this fiddle 中的 'Gender' 列。 'TAB' 和“SHIFT + TAB”序列无法正常工作请查看 'Gender' 列下的文本字段获得焦点时的不一致。

Answer 1

试试这个：

public setFocus(el: string): any {
    var vm = this;
    setTimeout(function () {
        $("#" + el).focus();
        $("#" + el).select();

    }, 100);
}

Answer 2

我已经使用焦点和模糊等事件解决了这个问题。

查看解决方案 here。

myApp.directive('focusComponent', ['uiGridConstants', 'uiGridEditConstants',
  function(uiGridConstants, uiGridEditConstants) {
    return {
      require: ['?^uiGrid', '?^uiGridRenderContainer'],
      scope: true,
      restrict: 'E',
      template: '<div><div>Some text</div><input type="text"></div>',
      link: function($scope, element, attrs, controllers) {
        console.log(element);
        console.log(arguments);
        setTimeout(function() {
          angular.element($(element).children().children()[1])[0].focus();
          angular.element($(element).children().children()[1])[0].select();
        }, 10);

        var uiGridCtrl = controllers[0];
        var renderContainerCtrl = controllers[1];

        //set focus at start of edit
        $scope.$on(uiGridEditConstants.events.BEGIN_CELL_EDIT, function() {
          var thisEle = angular.element($(element).children().children()[1])[0];
          thisEle.focus();
          thisEle.select();
          thisEle.style.width = (thisEle.parentElement.offsetWidth - 1) + 'px';
          element.on('blur', function(evt) {
            console.log("blur - element");
            $scope.stopEdit(evt);
          });
        });


        $scope.stopEdit = function(evt) {
          // no need to validate a dropdown - invalid values shouldn't be
          // available in the list
          $scope.$emit(uiGridEditConstants.events.END_CELL_EDIT);
        };

        element.on('keydown', function(evt) {
          switch (evt.keyCode) {
            case uiGridConstants.keymap.ESC:
              evt.stopPropagation();
              $scope.$emit(uiGridEditConstants.events.CANCEL_CELL_EDIT);
              break;
          }
          if (uiGridCtrl && uiGridCtrl.grid.api.cellNav) {
            evt.uiGridTargetRenderContainerId = renderContainerCtrl.containerId;
            if (uiGridCtrl.cellNav.handleKeyDown(evt) !== null) {
              $scope.stopEdit(evt);
            }
          } else {
            //handle enter and tab for editing not using cellNav
            switch (evt.keyCode) {
              case uiGridConstants.keymap.ENTER: // Enter (Leave Field)
              case uiGridConstants.keymap.TAB:
                evt.stopPropagation();
                evt.preventDefault();
                $scope.stopEdit(evt);
                break;
            }
          }
          return true;
        });
      }
    }
  }
]);

如何将焦点设置到 'editableCellTemplate' 中使用的自定义指令中的文本字段？

How to set focus to textfields in custom directive used inside 'editableCellTemplate'?

javascript

angularjs

angular-ui-grid