如何设置输入字段的焦点?

在AngularJS中，“Angular的方法”是什么?

更具体的要求:

当打开一个模态时，将焦点设置在这个模态内预定义的<input>上。每次<input>变得可见时(例如，通过单击某个按钮)，将焦点设置在它上。

我尝试用自动对焦来实现第一个要求，但这只在Modal第一次打开时有效，并且只在某些浏览器中有效(例如在Firefox中它不起作用)。

当前回答

这工作得很好，并以一种角度的方式来聚焦输入控件

angular.element('#elementId').focus()

虽然这不是一种纯粹的角方式来完成任务，但语法遵循了角风格。Jquery使用Angular间接和直接访问DOM (jQLite => Jquery Light)。

如果需要，这段代码可以很容易地放在一个简单的角指令中，其中element可以直接访问。

2014-08-11 07:10:43

其他回答

你也可以使用angular内置的jqlite功能。

angular.element (.selector) .trigger(重点);

2013-12-11 08:35:10

这工作得很好，并以一种角度的方式来聚焦输入控件

angular.element('#elementId').focus()

虽然这不是一种纯粹的角方式来完成任务，但语法遵循了角风格。Jquery使用Angular间接和直接访问DOM (jQLite => Jquery Light)。

如果需要，这段代码可以很容易地放在一个简单的角指令中，其中element可以直接访问。

2014-08-11 07:10:43

我发现其他一些答案过于复杂，而你真正需要的只是这个

app.directive('autoFocus', function($timeout) {
    return {
        restrict: 'AC',
        link: function(_scope, _element) {
            $timeout(function(){
                _element[0].focus();
            }, 0);
        }
    };
});

使用

<input name="theInput" auto-focus>

我们使用超时来让dom中的东西呈现，即使它是零，它至少会等待它-这种方式也适用于模态和其他东西

2014-01-01 02:25:22

只是顺便送点咖啡。

app.directive 'ngAltFocus', ->
    restrict: 'A'
    scope: ngAltFocus: '='
    link: (scope, el, attrs) ->
        scope.$watch 'ngAltFocus', (nv) -> el[0].focus() if nv

2014-06-10 22:16:38

这可能是ES6时代最简单的解决方案。

添加下面的一行指令使得HTML的“autofocus”属性在Angular.js上有效。

.directive('autofocus', ($timeout) => ({link: (_, e) => $timeout(() => e[0].focus())}))

现在，你可以使用HTML5自动对焦语法，比如:

<input type="text" autofocus>

2017-06-15 07:58:19

如何设置输入字段的焦点?

推荐文章

最新文章

标签