Manually set the focus on input element in angular js

Question

I create one input element and on click show the list of items after selecting any item list get hide.

But the focus is not on that element it get down,

So I just want to manually set the focus on input element when radio button list get hide.

Here is use the following code,

View

 <label class="item item-input item-stacked-label" ng-click="showDays()">
            <span class="input-label black-text">DAYS</span>
            <span class="input-ctrl">
            <input type="text" id="days" readonly  ng-model="data_day" focus-on="!daysflag">
            </span>
 </label>
 <div ng-show="daysflag">
          <ion-radio icon="ion-ios-checkmark" ng-model="data_day" ng-value="{{day}}" ng-repeat="day in days" ng-click="hideDayFlag()">{{day}}</ion-radio>
 </div>

Controller

        $scope.days = [1, 2, 3, 4, 5, 6, 7];

        $scope.showDays = function() {
          $scope.daysflag = true;
        }
        $scope.hideDayFlag = function() {
          $scope.daysflag = false;
        }

Directive

 .directive('focusOn',function($timeout) {
            return {
                restrict : 'A',
                link : function($scope,$element,$attr) {
                    $scope.$watch($attr.focusOn,function(_focusVal) {
                        $timeout(function() {
                            _focusVal ? $element[0].focus() :
                                $element[0].blur();
                        });
                    });
                }
            }
        });

Please help me to solve this issue.

Stepan Kasyanenko · Accepted Answer · 2016-06-16 08:42:53Z

1

You are wrong to use the function scope.$watch. scope.$watch is used to track changes in the $scope.

See detail explanation.

Example on jsfiddle.

angular.module('ExampleApp', [])
  .controller('ExampleController', function() {
    var vm = this;
    vm.isFocus = false;
  })
  .directive('focusOn', function() {
    return {
      restrict: 'A',
      scope: {
        focusOn: "="
      },
      link: function(scope, $element, $attr) {
        scope.$watch('focusOn', function(_focusVal) {
          _focusVal ? $element[0].focus() :
            $element[0].blur();
        });
        $element.on("focus", function() {
          scope.$applyAsync(function() {
            scope.focusOn = true;
          });
        });
        $element.on("blur", function() {

          scope.$applyAsync(function() {
            scope.focusOn = false;
          });
        })
      }
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController as vm">
    <input ng-model="vm.countRow" focus-on="vm.isFocus">
    <input type="button" value="Focus" ng-click="vm.isFocus=true">
    <input type="button" value="Blur" ng-click="vm.isFocus=false">{{vm.isFocus}}
  </div>
</div>

edited Jun 16, 2016 at 8:42

answered Jun 16, 2016 at 8:22

Stepan Kasyanenko

3,1761 gold badge17 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Santosh Shinde Over a year ago

Thank you for your response but For the my issue its not working

Santosh Shinde Over a year ago

i have issue when ng-show get false and list get hide then focus goes to directly on html input field

Stepan Kasyanenko Over a year ago

To solve your issue, you create directive focusOn. This directive doesn't work! You write So I just want to manually set the focus on input element when radio button list get hide. And i do it. Manually set focus on input element.

Santosh Shinde Over a year ago

focusing is work but it not scroll up on that element

Stepan Kasyanenko Over a year ago

On chrome v49 scroll up on focus element.

Collectives™ on Stack Overflow

Manually set the focus on input element in angular js

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related