Question

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

<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>

提前感谢您的帮助！

Answer 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>

Answer 2

我建议可以轻松使用jquery。从ng-click调用一个函数，它执行jquery进行自动对焦，如下所示：

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

Answer 3

参考：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 );

                }
            });
        }
    };
});

使用angularjs强制关注点击输入字段

3 个答案: