首页 文章

如何在每次打开模态时将焦点设置在角度ui模态内的textarea？

提问于
浏览 次
6

我有一个角度ui模态内的textarea，并且需要在模态可见时将焦点设置到它，不能在文档加载，因为它只在第一次打开模态时工作 .

模态有动画打开，我需要在动画完成后设置焦点 .

基于此处研究的其他问题，我创建了以下指令：

.directive('focusMe', ['$timeout', focusMe]);
  function focusMe($timeout) {
    return function (scope, element) {
    scope.$watch(function () {
      $timeout(function () {
        element[0].focus();
      });
    });
  };
};

但是这个指令总是检查textarea的重点 . 由于我的模态有另一个输入字段，当我单击它时，焦点再次更改为使用该指令的textarea . 如何设置焦点 only the first time 使模态可见？

UPDATE

更多信息：在某种程度上解决了始终关注textarea的问题 .

但是由于我的模态有动画淡入淡出，在IE中焦点显示在文本框上方，在外面，我不得不使用超时来IE设置正确的焦点 . 那样不是很好 . 一些更好的方法？

angularjs modal-dialog focus angular-ui-bootstrap directive

3 回答

  • 1

    我使用带有角度ui-modal指令的以下版本的focus-me指令 .

    angular.directive('focusMe', function($timeout) {
    return {
        scope: { trigger: '@focusMe' },
        link: function(scope, element) {
            scope.$watch('trigger', function(value) {
                if(value === "true") {
                    $timeout(function() {
                        element[0].focus();
                    });
                }
            });
        }
    };
});

    以模态形式使用focus-me指令的示例：

    <div class="modal-header">
    some header
</div>
<div class="modal-body">
    <form name="someForm" method="post" novalidate="">
        <fieldset>
            <textarea name="answerField" placeholder="Enter text..."  focus-me="true" ng-model="model.text"></textarea>
        </fieldset>
    </form>
</div>
<div class="modal-footer">
    some footer
</div>
    回复于
  • 2

    迟到的答案但是当使用多指令时最好使用attr观察，因为你可以遇到创建隔离范围的多指令问题

    ControlDirectives.directive('focusMe', function ($timeout) {
    return {
        link: function (scope, element, attr) {
            attr.$observe('focusMe', function (value) {
                if (value === "true") {
                    $timeout(function () {
                        element[0].focus();
                    });
                }
            });
        }
    };
});

<input name="baseCode" focus-me="true" type="text"/>
    回复于
  • 8

    您必须对此进行测试，我不确定它是否可行，但是您可以通过简单的方法将脚本嵌入到模态的HTML模板中：

    ...
<script>document.getElementById('fieldId').focus();</script>
...
    回复于

相关问题