How to blink cursor in input box when click on Add New button?

Question

**HTML**

<div ng-app="myApp" ng-controller="myCtrl">
    <input placeholder="Enter your teams name" ng-model="team_input" ng-show="myVar" ng-focus="true" class="team_input"  ng-class="{redPlaceholder : newteamfocus, whitePlaceholder : !newteamfocus}" ng-blur="newteamfocus=true" type="text" name="team_input" autofocus required/>
     <button ng-click="toggleTeamField()">Add New</button>
</div>


**JS**

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.myVar = false;
    $scope.toggleTeamField = function() {
        $scope.myVar = !$scope.myVar;
        $scope.newteamfocus = false;
        $scope.team_input = "";
    };
});

Here I can show hidden input box, but the blinking cursor is not coming, when I clicked on add button. How to show Blinking cursor in input box. Plunker

possible duplicate of [Click a button to open a input field with Blinking Cursor](http://stackoverflow.com/questions/16590563/click-a-button-to-open-a-input-field-with-blinking-cursor) — Jaffer Wilson, Jul 22 '15 at 07:12
@JafferWilson . Cool. that is done by jquery. not using angular.js — Ramesh Rajendran, Jul 22 '15 at 07:14
@RameshRajendran what are you talking about, I didn't understood? — Jaffer Wilson, Jul 22 '15 at 07:16

score 2 · Accepted Answer · answered Jul 22 '15 at 07:49

You can achieve this using a directive which focuses the element on click.

http://plnkr.co/edit/rrjbCtrhxSkG0oRTL0TU?p=preview

One important thing to note is the element needs to be visible to focus. So add a timeout for 0.

.directive('myFocus', function($timeout) {
  return function(scope, element, attrs) {
    attrs.$observe('myFocus', function() {
      if (scope.$eval(attrs.myFocus)) {
        // Element needs to be visible to focus
        $timeout(function() {
          element[0].focus();
        })
      }
    })
  };
});

//html
<input placeholder="Enter your teams name" my-focus="{{focus}}" ng-model="team_input" ng-show="myVar"  class="team_input"  ng-class="{redPlaceholder : newteamfocus, whitePlaceholder : !newteamfocus}"  type="text" name="team_input" required/>

How to blink cursor in input box when click on Add New button?

1 Answers1