CODEWITHSUNDEEP
angularjsangularjs-directive
Ashwin
Ashwin

Reputation: 12431

ng-init select text of input element

Whenever a user check / uncheck a checkbox I am setting var edit = true / false. I have a input field which appears / disappears on true / false of edit. What I want to do is select the text value of the input field whenever the text fields appears.

HTML:

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <input type="checkbox" ng-model="edit" ng-init="edit = true">
    <div ng-bind="edit"></div>
    <div ng-if="edit">
      <input type="text" select-text ng-model="name" size="30" placeholder="New Name" />
    </div>
  </div>
</div>

JS:

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function($scope) {
  $scope.name = "Johny";

}]);

myApp.directive('selectText', function() {
    return {
    require: 'ngModel',
    link: function(scope, elem, attrs, ctrl) {
        elem.bind('focus', function() {
            $(elem).select();
        });
      $(elem).focus();          
    }
  };
});

I am having difficulty in invoking focus event of textfield whenever it appears.

http://jsfiddle.net/pnnzb5sm/2/

Upvotes: 0

Views: 623

Answers (2)

Saurabh Agrawal
Saurabh Agrawal

Reputation: 7739

I did it using $watch so that whenever edit will update it will call it

Try this

<html>
<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>

	<script>
	var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function($scope) {
  $scope.name = "Johny";

}]);

myApp.directive('selectText', function() {
    return {
    require: 'ngModel',
    link: function(scope, elem, attrs, ctrl) {
        elem.bind('focus', function() {
            $(elem).select();
        });
        scope.$watch("edit",function(newValue,oldValue) {
        //This gets called when data changes.
            $(elem).select();
        });

      $(elem).focus();  
    }
  };
});
	</script>


</head>
<body>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <input type="checkbox" ng-model="edit" ng-init="edit = true">
    <div ng-bind="edit"></div>
    <div ng-if="edit">
      <input type="text" select-text ng-model="name" size="30" placeholder="New Name" />
    </div>
  </div>
</div>
</body>
</html>

Upvotes: 1

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41445

use this 

 if (!$window.getSelection().toString()) {
     this.setSelectionRange(0, this.value.length)
 }

Demo

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function($scope) {
  $scope.name = "Johny";

}]);

myApp.directive('selectText', function($window) {
    return {
    require: 'ngModel', 
    link: function(scope, elem, attrs, ctrl) {
          elem.on('focus', function () {
                if (!$window.getSelection().toString()) {
                    // Required for mobile Safari
                    this.setSelectionRange(0, this.value.length)
                }
            });   
    }
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <input type="checkbox" ng-model="edit" ng-init="edit = true">
    <div ng-bind="edit"></div>
    <div ng-if="edit">
      <input autofocus type="text" select-text ng-model="name" size="30" placeholder="New Name" />
    </div>
  </div>
</div>

Upvotes: 0

Related Questions