Force focus on input-field on click with angularjs

Question

I have a text-box to show a input field on click and hide it on blur. The problem is when the input is shown, it is not auto-focused. The blur only works if you click the text-box, then click the input. But when you click the text-box once and go somewhere else, you can still see the input. Is it possible to auto-focus the input field on click? or maybe there is a better way to do this?

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

Thanks in advance for your help!

score 0 · Answer 1 · answered Jul 06 '17 at 20:13

0

You can apply "autofocus" for the input.

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

answered Jul 06 '17 at 20:13

NNguyen

216
2
7

Yea, I already tried that. The problem with autofocus is that it only works the first time. – user3797739 Jul 06 '17 at 20:23
@user3797739 Did you find the solution ? I would like to learn, too. – NNguyen Jul 07 '17 at 18:01
no, I still can't get it to work. The autofocus trick only works the first time. – user3797739 Jul 14 '17 at 09:50

cccross · Answer 2 · 2017-07-06T23:30:27.927

reference: 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 );

                }
            });
        }
    };
});

score -2 · Answer 3 · answered Jul 06 '17 at 21:15

-2

I would suggest maybe making some light use of jquery. Call a function from ng-click, which executes jquery to do an auto-focus, like so:

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

answered Jul 06 '17 at 21:15

Jack Zach Tibbles

800
1
11
27

Force focus on input-field on click with angularjs

3 Answers3