单击添加新按钮时如何在输入框中闪烁光标？答案

【问题标题】：How to blink cursor in input box when click on Add New button?单击添加新按钮时如何在输入框中闪烁光标？
【发布时间】：2015-07-22 07:00:15
【问题描述】：

**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 = "";
    };
});

在这里我可以显示隐藏的输入框，但是当我单击添加按钮时，闪烁的光标没有出现。如何在输入框中显示闪烁光标。 Plunker

【问题讨论】：

Click a button to open a input field with Blinking Cursor的可能重复
@JafferWilson 。凉爽的。这是由 jquery 完成的。不使用 angular.js
@RameshRajendran 你在说什么，我没听懂？

标签： angularjs angularjs-directive angularjs-scope

【解决方案1】：

您可以使用将元素集中在点击上的指令来实现此目的。

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

需要注意的重要一点是元素需要可见才能聚焦。所以为 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/>

【讨论】：