Question

我有一个实现就地编辑的指令。在link函数中，我有一个手表，当打开编辑时，它应该在文本框上设置焦点：

$scope.$watch('view.enabled', function(value) {
  if (value) {
    var element = $element.find('input') || $element.find('textarea');
    var input = element && element[0];
    if (input) {
      $timeout(function() {
        input.focus()
      });
    }
  }
});

该指令可以实例化input元素或textarea，具体取决于参数。问题是在focus()元素上调用textarea不会将焦点设置到它。对于input元素，它确实设置了焦点。

这是plnkr。请帮忙。

Plunker Link

编辑：在HTML中的autofocus上使用textarea属性使其成为焦点，但我仍然不明白为什么我不能以编程方式执行此操作。

Answer 1

我不认为$ timeout是将元素集中在创作上的好方法。您可以拆分＆＃34;链接＆＃34;属性可以拆分为＆＃34; pre＆＃34;和＆＃34;发布＆＃34;，用于预链接和后链接功能。

Working Example: http://plnkr.co/edit/Fj59GB

// this is the directive you add to any element you want to highlight after creation
Guest.directive('autoFocus', function() {
    return {
        link: {
            pre: function preLink(scope, element, attr) {
                console.debug('prelink called');
                // this fails since the element hasn't rendered
                //element[0].focus();
            },
            post: function postLink(scope, element, attr) {
                console.debug('postlink called');
                // this succeeds since the element has been rendered
                element[0].focus();
            }
        }
    }
});

<input value="hello" />
<!-- this input automatically gets focus on creation -->
<input value="world" auto-focus />

Full AngularJS Directive Docs: https://docs.angularjs.org/api/ng/service/$compile

Answer 2

您没有将焦点设置为 textarea 。试试这个：

if (input) {
    $timeout(function() {
        console.log(input);
        input.focus();
    });
}

它会给你这个：

<input ng-show="editableType !== 'multi-line'" 
       ng-model="view.value" 
       class="ng-pristine ng-valid ng-hide">

而不是 textarea 。快速修复（仅限 textarea ）可以是：

var element = $element.find('textarea');

根据事情的顺序，我不确定这是否会有所帮助：

var element = $element.find('textarea') || $element.find('input');

必须仔细看看......

在角度指令中将焦点设置为textarea

2 个答案: