Question

我正在使用AngularJS应用程序，我希望将光标/焦点放在特定的位置路由到该页面时的文本框。但是在使用JavaScript的setFocus（）方法多次尝试后，HTML的自动对焦和其他变通方法似乎无法正常工作。发生的事情是，在简短地关注所需文本框之后，焦点/光标始终在页面上的第一个文本框上着陆/返回。我无法确定导致此行为的原因。

我也尝试过使用eventListeners但是徒劳无功。我所做的是，在关注第一个文本框时，我将焦点设置在所需的文本框上。但它不起作用。

这是我尝试实现此功能的页面：

HTML：

<div class="form-group">
    <div class="col-md-4 col-md-offset-4">
        <input type="number" class="form-control" id="dN1" name="dN1" ng-model="ob.dt" title="{{ title }}" ng-maxlength="4"  />
    </div>
</div>
<div class="form-group">
    <div class="col-md-20 col-md-offset-14">
        <input type="text" capitalize trim-spaces class="form-control" id="ifp" name="ifp" ng-model="ob.ifp" />
    </div>
</div>

我希望重点放在文本框中，以及ifp＆＃39;页面最初加载时的ID，或者即使之后加载路线。

在JS方面，在控制器中我已经尝试过这些，但它们似乎不起作用：

window.onload = function setFocus() {
    var el = document.getElementById('ifp');
    if (el) {
      el.focus();
    }
  }

  document.addEventListener('DOMContentLoaded', function() {
    var ifp = $window.document.getElementById('ifp');
    ifp.focus();
  }, false);

  $scope.putFocus = function(){
    $window.document.getElementById('ifp').focus();
  }

任何帮助都将不胜感激。

Answer 1

试试这个黑客：

$scope.putFocus = function(){
   $timeout(function(){
       $window.document.getElementById('ifp').focus();
  },0)
  }

$scope.putFocus();

您还可以在元素本身中使用autofocus属性来放置焦点

<input autoFocus />

Answer 2

使用 ng-init 代替 DOMContentLoaded --------- ---------- HTML

<div class="form-group">
    <div class="col-md-20 col-md-offset-14">
        <input type="text" capitalize trim-spaces class="form-control" id="ifp" name="ifp" ng-model="ob.ifp" ng-init="putFocus()"/>
    </div>
</div>

---------控制器-------

document.addEventListener('DOMContentLoaded', function() {
    //var ifp = $window.document.getElementById('ifp');
    //ifp.focus();
}, false);

在AngularJS app

2 个答案: