提前选择好角度UI引导后专注于其他输入 [英] 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并将文本区域集中在$ 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

编辑

我认为预先输入设置中有一个选项

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

这篇关于提前选择好角度UI引导后专注于其他输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！