如何设置对输入字段的关注？

本文翻译自：How to set focus on input field?

What is the 'Angular way' to set focus on input field in AngularJS? 在AngularJS中将焦点设置在输入字段上的“角度方式”是什么？

More specific requirements: 更具体的要求：

When a Modal is opened, set focus on a predefined <input> inside this Modal. 打开模态后，将焦点放在此模态内的预定义<input> 。
Everytime <input> becomes visible (eg by clicking some button), set focus on it. 每当<input>变为可见时（例如，通过单击某些按钮），请将焦点设置在它上面。

I tried to achieve the first requirement with autofocus , but this works only when the Modal is opened for the first time, and only in certain browsers (eg in Firefox it doesn't work). 我试图通过autofocus 达到第一个要求，但这仅在首次打开Modal时有效，并且仅在某些浏览器中有效（例如，在Firefox中不起作用）。

Any help will be appreciated. 任何帮助将不胜感激。

#1楼

参考：https://stackoom.com/question/10EpC/如何设置对输入字段的关注

#2楼

When a Modal is opened, set focus on a predefined <input> inside this Modal. 打开模态后，将焦点放在此模态内的预定义<input>上。

Define a directive and have it $watch a property/trigger so it knows when to focus the element: 定义一个指令，并使其$ watch一个属性/触发器，以便它知道何时集中该元素：

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

app.directive('focusMe', ['$timeout', '$parse', function ($timeout, $parse) {return {//scope: true,   // optionally create a child scopelink: 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 柱塞

The $timeout seems to be needed to give the modal time to render. $ timeout似乎需要给定模态时间来渲染。

'2.' '2。 Everytime <input> becomes visible (eg by clicking some button), set focus on it. 每当<input>变为可见时（例如，通过单击某些按钮），请将焦点设置在它上面。

Create a directive essentially like the one above. 创建一个基本上与上述指令相似的指令。 Watch some scope property, and when it becomes true (set it in your ng-click handler), execute element[0].focus() . 观察一些scope属性，当它变为true时（在ng-click处理程序中进行设置），执行element[0].focus() 。 Depending on your use case, you may or may not need a $timeout for this one: 根据您的用例，您可能需要也可能不需要$ timeout：

<button class="btn" ng-click="showForm=true; focusInput=true">show form andfocus 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, element, attrs) {scope.$watch(attrs.focusMe, function(value) {if(value === true) { console.log('value=',value);//$timeout(function() {element[0].focus();scope[attrs.focusMe] = false;//});}});}};
});

Plunker 柱塞

Update 7/2013 : I've seen a few people use my original isolate scope directives and then have problems with embedded input fields (ie, an input field in the modal). 更新7/2013 ：我已经看到一些人使用我原来的隔离范围指令，然后在嵌入的输入字段（即模态中的输入字段）方面遇到问题。 A directive with no new scope (or possibly a new child scope) should alleviate some of the pain. 没有新作用域（或可能新的子作用域）的指令应减轻某些痛苦。 So above I updated the answer to not use isolate scopes. 因此，以上我更新了不使用隔离范围的答案。 Below is the original answer: 以下是原始答案：

Original answer for 1., using an isolate scope: 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 . 柱塞。

Original answer for 2., using an isolate scope: 2.使用隔离范围的原始答案：

<button class="btn" ng-click="showForm=true; focusInput=true">show form andfocus 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' },link: function(scope, element) {scope.$watch('trigger', function(value) {if(value === true) { //console.log('trigger',value);//$timeout(function() {element[0].focus();scope.trigger = false;//});}});}};
});

Plunker . 柱塞。

Since we need to reset the trigger/focusInput property in the directive, '=' is used for two-way databinding. 由于我们需要在指令中重置trigger / focusInput属性，因此“ =”用于双向数据绑定。 In the first directive, '@' was sufficient. 在第一个指令中，“ @”就足够了。 Also note that when using '@' we compare the trigger value to "true" since @ always results in a string. 还要注意，当使用“ @”时，我们将触发值与“ true”进行比较，因为@始终会产生字符串。

#3楼

First, an official way to do focus is on the roadmap for 1.1 . 首先，官方的重点关注方法是1.1的路线图。 Meanwhile, you can write a directive to implement setting focus. 同时，您可以编写指令以实现设置焦点。

Second, to set focus on an item after it has become visible currently requires a workaround. 其次，要在当前可见的项目上设置焦点，需要一种解决方法。 Just delay your call to element focus() with a $timeout . 只需使用$timeout延迟对元素focus（）的调用即可。

Because the same controller-modifies-DOM problem exists for focus, blur and select, I propose having an ng-target directive: 因为在聚焦，模糊和选择方面存在相同的controller-modified-DOM问题，所以我建议使用ng-target指令：

<input type="text" x-ng-model="form.color" x-ng-target="form.colorTarget">
<button class="btn" x-ng-click="form.colorTarget.focus()">do focus</button>

Angular thread here: http://goo.gl/ipsx4 , and more details blogged here: http://goo.gl/4rdZa 此处的角度线程： http : //goo.gl/ipsx4 ，更多详细信息在此处发布： http : //goo.gl/4rdZa

The following directive will create a .focus() function inside your controller as specified by your ng-target attribute. 以下指令将在ng-target属性指定的控制器内部创建一个.focus()函数。 (It creates a .blur() and a .select() too.) Demo: http://jsfiddle.net/bseib/WUcQX/ （它.blur()创建一个.blur()和一个.select() 。）演示： http : //jsfiddle.net/bseib/WUcQX/

#4楼

I've written a two-way binding focus directive, just like model recently. 我写了一个双向绑定焦点指令，就像最近的模型一样。

You can use the focus directive like this: 您可以像这样使用focus指令：

<input focus="someFocusVariable">

If you make someFocusVariable scope variable true in anywhere in your controller, the input get focused. 如果您在控制器中的任何位置使someFocusVariable范围变量为true ，则输入将成为焦点。 And if you want to "blur" your input then, someFocusVariable can be set to false. 而且，如果您想“模糊”输入内容，可以将someFocusVariable设置为false。 It's like Mark Rajcok's first answer but with two-way binding. 这就像Mark Rajcok的第一个答案，但具有双向绑定。

Here is the directive: 这是指令：

function Ctrl($scope) {$scope.model = "ahaha"$scope.someFocusVariable = true; // If you want to focus initially, set this to true. Else you don't need to define this at all.
}angular.module('experiement', []).directive('focus', function($timeout, $parse) {return {restrict: 'A',link: function(scope, element, attrs) {scope.$watch(attrs.focus, function(newValue, oldValue) {if (newValue) { element[0].focus(); }});element.bind("blur", function(e) {$timeout(function() {scope.$apply(attrs.focus + "=false"); }, 0);});element.bind("focus", function(e) {$timeout(function() {scope.$apply(attrs.focus + "=true");}, 0);})}}});

Usage: 用法：

<div ng-app="experiement"><div ng-controller="Ctrl">An Input: <input ng-model="model" focus="someFocusVariable"><hr><div ng-click="someFocusVariable=true">Focus!</div>  <pre>someFocusVariable: {{ someFocusVariable }}</pre><pre>content: {{ model }}</pre></div>
</div>

Here is the fiddle: 这是小提琴：

http://fiddle.jshell.net/ubenzer/9FSL4/8/ http://fiddle.jshell.net/ubenzer/9FSL4/8/

#5楼

(EDIT: I've added an updated solution below this explanation) （编辑：我在此说明下方添加了更新的解决方案）

Mark Rajcok is the man... and his answer is a valid answer, but it has had a defect (sorry Mark)... 马克·拉杰科克（Mark Rajcok）是这个人...他的回答是有效的回答，但是有缺陷（对不起马克）...

...Try using the boolean to focus on the input, then blur the input, then try using it to focus the input again. ...尝试使用布尔将焦点放在输入上，然后使输入模糊，然后尝试使用它再次将输入聚焦。 It won't work unless you reset the boolean to false, then $digest, then reset it back to true. 除非将布尔值重置为false，然后将$ digest重置为true，否则它将不起作用。 Even if you use a string comparison in your expression, you'll be forced to change the string to something else, $digest, then change it back. 即使在表达式中使用字符串比较，也将不得不将字符串更改为$ digest，然后再将其更改。 (This has been addressed with the blur event handler.) （这已通过模糊事件处理程序解决。）

So I propose this alternate solution: 因此，我提出了这个替代解决方案：

Use an event, the forgotten feature of Angular. 使用一个事件，Angular的被遗忘的功能。

JavaScript loves events after all. JavaScript毕竟热爱事件。 Events are inherently loosely coupled, and even better, you avoid adding another $watch to your $digest. 事件本质上是松散耦合的，甚至更好的是，您避免在$ digest中添加另一个$ watch。

app.directive('focusOn', function() {return function(scope, elem, attr) {scope.$on(attr.focusOn, function(e) {elem[0].focus();});};
});

So now you could use it like this: 所以现在您可以像这样使用它：

<input type="text" focus-on="newItemAdded" />

and then anywhere in your app... 然后在您应用的任何位置...

$scope.addNewItem = function () {/* stuff here to add a new item... */$scope.$broadcast('newItemAdded');
};

This is awesome because you can do all sorts of things with something like this. 这很棒，因为您可以用这样的东西来做各种事情。 For one, you could tie into events that already exist. 首先，您可以绑定已经存在的事件。 For another thing you start doing something smart by having different parts of your app publish events that other parts of your app can subscribe to. 另一方面，您可以通过让应用程序的不同部分发布事件，让应用程序的其他部分可以订阅来开始做一些聪明的事情。

Anyhow, this type of thing screams "event driven" to me. 无论如何，这种事情对我来说是“事件驱动”的尖叫。 I think as Angular developers we try really hard to hammer $scope shaped pegs into event shape holes. 我认为，作为Angular开发人员，我们非常努力地将$ scope形的钉子锤入事件形状的孔中。

Is it the best solution? 这是最好的解决方案吗？ I dunno. 我不知道。 It's a solution. 这是一个解决方案。

Updated Solution 更新的解决方案

After @ShimonRachlenko's comment below, I've changed my method of doing this slightly. 在@ShimonRachlenko在下面发表评论后，我已经稍微更改了执行此操作的方法。 Now I use a combination of a service and a directive that handles an event "behind the scenes": 现在，我结合使用服务和处理“幕后”事件的指令：

Other than that, it's the same principal outlined above. 除此之外，它与上面概述的原理相同。

Here is a quick demo Plunk 这是一个快速演示Plunk

Usage 用法

<input type="text" focus-on="focusMe"/>

app.controller('MyCtrl', function($scope, focus) {focus('focusMe');
});

Source 资源

app.directive('focusOn', function() {return function(scope, elem, attr) {scope.$on('focusOn', function(e, name) {if(name === attr.focusOn) {elem[0].focus();}});};
});app.factory('focus', function ($rootScope, $timeout) {return function(name) {$timeout(function (){$rootScope.$broadcast('focusOn', name);});}
});

#6楼

您还可以使用angular内置的jqlite功能。

angular.element('.selector').trigger('focus');