Javascript 状态更改后使元素保持焦点

在我的AngularJS/Ui路由器应用程序中，我有一系列输入框，如下所示：

<input ng-model="vm.filter" ng-keyup="vm.onKeyUp($event)" type="text" class="form-control" id="filter">

var vm = this;
vm.onKeyUp = function (e) {
    var val = e.currentTarget.value;
    $state.go('aState', { 'filter': val });
}

.factory('$DOM', ['$window', '$timeout', function ($window, $timeout) {
    return {
        __constructor: function (selector, event) {
             $timeout(function () {
                 var element = (typeof selector == 'object') ? 
                               selector :    
                               $window.document.querySelector(selector);

                 (!!element && !!element[event]) ? element[event]() : null;
              });
          },
          focus: function (selector) {
              this.__constructor(selector, 'focus');
          },
          blur: function (selector) {
              this.__constructor(selector, 'blur');
          }, //and so....
      };
}])

这将触发状态更改（实际上只是状态参数

filter

is change），它将在后台调用，在流程结束时，过滤我的数据集并显示子集。太棒了

但有一个小问题：在状态更改时，HTML输入失去了焦点，我不知道如何在流结束时将其设置为焦点。

---

这是必要的，因为用户开始在输入框中写入内容，然后当他的焦点“不确定地”丢失时会感到惊讶。糟糕的用户界面体验。

好的，我能读到什么？您只需在url上使用不同的参数调用相同的状态（

：filter

），即使状态相同，也会发生的情况是，状态更改会强制重新加载视图，从而丢失聚焦元素

除非你在

$stateChangeStart

上执行

事件.preventDefault（）

，否则这就是你的行为，但我很确定你的数据不会被更新

因此，可能的解决方案是：

重新思考您的流程，使其不依赖于状态更改。（此处无需编码：P）

找到一种保存活动元素并将其设置为重新加载的方法，如

//sessionStorage to prevent data stored after window is closed;
$scope.$on('$stateChangeStart', function(){
    $window.sessionStorage.setItem('focusedId', '#' + document.activeElement.id);      
});

$scope.$on('$viewContentLoaded', function(){ 
    if((var id = $window.sessionStorage.getItem('focusedId'))) {
        $DOM.focus(id);  
        //Use a service for DOM manipulation, you know manipulation in controllers is bad :(
    }
});

` 服务可以是这样的：

<input ng-model="vm.filter" ng-keyup="vm.onKeyUp($event)" type="text" class="form-control" id="filter">

var vm = this;
vm.onKeyUp = function (e) {
    var val = e.currentTarget.value;
    $state.go('aState', { 'filter': val });
}

.factory('$DOM', ['$window', '$timeout', function ($window, $timeout) {
    return {
        __constructor: function (selector, event) {
             $timeout(function () {
                 var element = (typeof selector == 'object') ? 
                               selector :    
                               $window.document.querySelector(selector);

                 (!!element && !!element[event]) ? element[event]() : null;
              });
          },
          focus: function (selector) {
              this.__constructor(selector, 'focus');
          },
          blur: function (selector) {
              this.__constructor(selector, 'blur');
          }, //and so....
      };
}])

---

注释如果你找到更好的方法，也许你可以刷新数据，防止刷新视图，我对ui.router的理解是错误的：）

Element.focus（）；应该在代码末尾将元素放回焦点…我认为这可能足够了，但这不起作用。。。