使用angularjs单击时强制关注输入字段答案

【问题标题】：Force focus on input-field on click with angularjs使用angularjs单击时强制关注输入字段
【发布时间】：2017-12-10 23:04:01
【问题描述】：

我有一个文本框，可以在单击时显示输入字段并在模糊时将其隐藏。问题是当显示输入时，它不是自动聚焦的。仅当您单击文本框，然后单击输入时，模糊才有效。但是，当您单击文本框一次并转到其他位置时，您仍然可以看到输入。是否可以在单击时自动聚焦输入字段？或者也许有更好的方法来做到这一点？

<div data-ng-init="editMode = false">
    <p data-ng-show="!editMode" data-ng-click="editMode = true">{{color}}</p>
    <span data-ng-show="editMode">
       <input data-ng-blur="editMode = false" data-ng-model="color">
    </span>
  </div>

提前感谢您的帮助！

【问题讨论】：

标签： html angularjs input focus

【解决方案1】：

您可以为输入应用“自动对焦”。

<div data-ng-init="editMode = false; color='Green'">
<p data-ng-show="!editMode" data-ng-click="editMode = true">{{color}}</p>
<span data-ng-show="editMode">
   <input data-ng-blur="editMode = false" data-ng-model="color" autofocus>
</span>

【讨论】：

是的，我已经试过了。自动对焦的问题在于它只能在第一次使用。
@user3797739 您找到解决方案了吗？我也想学。
不，我仍然无法让它工作。自动对焦技巧仅在第一次时有效。

【解决方案2】：

参考：Input autofocus attribute

angular.module('ng').directive('autoFocus', function($timeout) {
    return {
        link: function ( scope, element, attrs ) {
            scope.$watch( attrs.autoFocus, function ( val ) {
                if ( angular.isDefined( val ) && val ) {
                    $timeout( function () { element[0].focus(); } );
                }
            }, true);

            element.bind('blur', function () {
                if ( angular.isDefined( attrs.autoFocusLost ) ) {
                    scope.$apply( attrs.autoFocusLost );

                }
            });
        }
    };
});

【讨论】：

【解决方案3】：

我建议也许稍微使用一下 jquery。从 ng-click 调用一个函数，该函数执行 jquery 进行自动对焦，如下所示：

$("#textInputId").focus();

【讨论】：