在 typeahead-on-select angular-ui-bootstrap 之后专注于其他输入 [英] Focus on other input after typeahead-on-select angular-ui-bootstrap

问题描述

我在使用 angular-ui 引导程序时遇到问题:我有 2 个输入:

I have a problem with angular-ui bootstrap: I have 2 input:

<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>

在我的控制器中，我有一个函数 focusSuccessive($item, $model, $label, $event)" 应该在选择后聚焦 textArea.

And in my controller I have a function focusSuccessive($item, $model, $label, $event)" that should focus textArea after selected.

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

但它不起作用，但如果我放一个按钮:

But it doesn't work, But if I put a button like:

<button ng-click="focusSuccessive()">focus</button>

它有效，那么如何在选择预先输入后聚焦文本区域或输入?

It work, so How Can I focus a textarea or input after typeahead selected?

推荐答案

发生此行为的原因是 typeahead-on-select 中的回调.它聚焦您的元素，但由于此代码，输入再次聚焦

This behaviour is happening because of callback in typeahead-on-select. It focuses your element but input gets focussed again due to this code

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

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

You can solve this by focusing your element asynchronously.

在您的 focusSuccessive 函数中使用 $timeout 并将您的 textarea 集中在该 $timeout 内

In your focusSuccessive function use a $timeout and focus your textarea inside that $timeout

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

  }, 100, false);
}

这将解决您的问题.

我不确定是否有其他不需要使用 $timeout 的方法来解决这个问题

I am not sure that there is some other way to solve this issue which don't require using $timeout

编辑

我认为 typeahead-settings 中有一个选项

I think there is a option in typeahead-settings

typeahead-focus-on-select

默认设置为 true，将其设置为 false 将禁用此行为，您不需要 $timeout.只需正常聚焦您的元素

Which is set to true by default, setting it to false will disable this behaviour and you dont need $timeout. Just focus your element normally

<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">

这篇关于在 typeahead-on-select angular-ui-bootstrap 之后专注于其他输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！