angularjs – 如何设置输入字段的焦点？

什么是“Angular方式”设置焦点在AngularJS中的输入字段？

更多具体要求：

>当打开Modal时，将焦点设置在预定义的在这个模态。
> Everytime变得可见(例如通过点击一些按钮)，设置焦点。

I tried to achieve the first requirement与自动对焦，但这只有当第一次打开模态，只有在某些浏览器(例如在Firefox中它不工作)。

任何帮助将不胜感激。

When a Modal is opened,set focus on a predefined <input> inside this Modal.

定义一个指令，让它看看一个属性/触发器，所以它知道什么时候聚焦元素：

Name: <input type="text" focus-me="shouldBeOpen">

app.directive('focusMe',['$timeout','$parse',function ($timeout,$parse) {
    return {
        //scope: true,// optionally create a child scope
        link: function (scope,element,attrs) {
            var model = $parse(attrs.focusMe);
            scope.$watch(model,function (value) {
                console.log('value=',value);
                if (value === true) {
                    $timeout(function () {
                        element[0].focus();
                    });
                }
            });
            // to address @blesh's comment,set attribute value to 'false'
            // on blur event:
            element.bind('blur',function () {
                console.log('blur');
                scope.$apply(model.assign(scope,false));
            });
        }
    };
}]);

Plunker

$ timeout似乎需要给出模态时间来渲染。

‘2.’ Everytime <input> becomes visible (e.g. by clicking some button),set focus on it.

创建一个基本上像上面的指令。观察一些范围属性，当它变为true(在您的ng-click处理程序中设置它)，执行element [0] .focus()。根据您的使用情况，您可能需要或可能不需要这个$ timeout：

<button class="btn" ng-click="showForm=true; focusInput=true">show form and
 focus input</button>
<div ng-show="showForm">
  <input type="text" ng-model="myInput" focus-me="focusInput"> {{ myInput }}
  <button class="btn" ng-click="showForm=false">hide form</button>
</div>

app.directive('focusMe',function($timeout) {
  return {
    link: function(scope,attrs) {
      scope.$watch(attrs.focusMe,function(value) {
        if(value === true) { 
          console.log('value=',value);
          //$timeout(function() {
            element[0].focus();
            scope[attrs.focusMe] = false;
          //});
        }
      });
    }
  };
});

Plunker

更新7/2013：我看到一些人使用我的原始隔离范围指令，然后有嵌入式输入字段(即模态中的输入字段)的问题。没有新范围(或可能是一个新的子范围)的指令应该减轻一些痛苦。所以上面我更新了不使用隔离范围的答案。下面是原始答案：

原始答案为1.，使用隔离范围：

Name: <input type="text" focus-me="{{shouldBeOpen}}">

app.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(); 
          });
        }
      });
    }
  };
});

Plunker。

原始答案为2.，使用隔离范围：

<button class="btn" ng-click="showForm=true; focusInput=true">show form and
 focus input</button>
<div ng-show="showForm">
  <input type="text" focus-me="focusInput">
  <button class="btn" ng-click="showForm=false">hide form</button>
</div>

app.directive('focusMe',function($timeout) {
  return {
    scope: { trigger: '=focusMe' },function(value) {
        if(value === true) { 
          //console.log('trigger',value);
          //$timeout(function() {
            element[0].focus();
            scope.trigger = false;
          //});
        }
      });
    }
  };
});

Plunker。

因为我们需要重置指令中的trigger / focusInput属性，所以’=’用于双向数据绑定。在第一个指令中，’@’就足够了。还要注意，当使用’@’时，我们将触发器的值与“true”进行比较，因为@总是产生一个字符串。

angularjs – 如何设置输入字段的焦点？

猜你在找的Angularjs相关文章