Question

我有一个angular-ui bootstrap的问题：我有2个输入：

import yyy from 'components/a/yyy'

在我的控制器中，我有一个功能 focusSuccessive（$ item，$ model，$ label，$ event）“，应该在选中后关注textArea。

<input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" typeahead-on-select="focusSuccessive($item, $model, $label, $event)" class="form-control">
<textarea class="form-control" id="message" rows="10" data-ng-model="caller.data.text" tabindex="25"></textarea>

但它不起作用，但如果我按下一个按钮：

$scope.focusSuccessive = function($item, $model, $label, $event){
   angular.element("#message").focus();
}

它有效，那么如何在选择预先输入后对焦textarea或输入？

Answer 1

由于typeahead-on-select中的回调，会发生此行为。它会聚焦您的元素，但由于此代码

，输入会再次聚焦

$timeout(function() {
   element[0].focus(); 
 }, 0, false);

您可以通过异步聚焦元素来解决此问题。

在你的focusSuccessive函数中使用$ timeout并将你的textarea聚焦在$ timeout

中

$scope.focusSuccessive = function($item, $model, $label, $event){
  $timeout(function() { 
    document.getElementById('message').focus(); 

  }, 100, false);
}

这将解决您的问题。

我不确定是否有其他方法可以解决此问题，并且不需要使用$ timeout

修改

我认为typeahead-settings

中有一个选项

typeahead-focus-on-select

默认设置为true，将其设置为false将禁用此行为，您不需要$ timeout。通常只关注你的元素

<input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" typeahead-on-select="focusSuccessive($item, $model, $label, $event)" typeahead-focus-on-select=false class="form-control">

在预先选择的angular-ui-bootstrap之后关注其他输入

1 个答案: