更改选项卡后如何在输入文本框中闪烁光标

Question

每当我单击按钮时，在输入字段中，光标都会闪烁。 但问题是，如果我转到另一个选项卡并且我将返回到该选项卡，那么此时光标不在该位置。 我需要再次单击输入字段。

• 也转到另一个选项卡后，如果我回来，输入字段应该会闪烁。

请看下面的链接，

提琴手

在这里，我有 3 个标签。 我在第三个选项卡中有输入字段。

• 如果我单击添加新按钮，将打开一个输入字段。

• 然后我点击第一个或第二个标签，然后我会回到同一个第三个标签。 那个时候，光标没有闪烁。

 angular .module('myApp', []) .directive('tabs', function() { return { restrict: 'E', transclude: true, template: '<ul id="myTab" class="nav nav-tabs">' + '<li ng-class="{active: activeTab == tab}" ng-repeat="tab in tabs"><a ng-click="setActive(tab)">{{tab}}</a></li>' + '</ul>' + '<div class="tab-content" ng-transclude></div>', controller: function($scope) { $scope.tabs = []; $scope.activeTab = ''; $scope.setActive = function(tab) { $scope.activeTab = tab; }; this.register = function(tabName) { $scope.tabs.push(tabName); if (!$scope.activeTab) { $scope.setActive(tabName); } }; this.isActive = function(tabName) { return tabName == $scope.activeTab; }; $scope.myVar = false; $scope.toggleTeamField = function() { $scope.myVar = !$scope.myVar; $scope.focus = !$scope.focus; }; } } }).directive('pane', function() { return { restrict: 'E', require: '^tabs', template: '<div class="tab-pane" ng-show="isActive(title)" ng-transclude></div>', transclude: true, scope: { title: '@' }, link: function(scope, element, attrs, tabsController) { tabsController.register(scope.title); scope.isActive = function(tabName) { return tabsController.isActive(tabName); }; } }; });

 <!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery.min.js"></script> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap-theme.min.css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script> <script src="app.js"></script> </head> <body ng-app="myApp"> <tabs> <pane title="Tab 1">Tab 1 Content</pane> <pane title="Tab 2">Tab 2 Content</pane> <pane title="Tab 3"> <input placeholder="Enter your teams name" my-focus="{{focus}}" ng-model="team_input" ng-show="myVar" class="team_input" type="text" name="team_input" required/> <button ng-click="toggleTeamField()">Add New</button> </pane> </tabs> </body> </html>

请帮助我我该怎么做？

Answer 1

如果你给你的输入字段一个id ：

<input 
  id="team_input"
  placeholder="Enter your teams name" 
  my-focus="{{focus}}" 
  ng-model="team_input" 
  ng-show="myVar"  
  class="team_input"  
  type="text"
  name="team_input" 
  required
/>

您可以像这样将其自动聚焦在选项卡更改上：

link: function(scope, element, attrs, tabsController) {
  tabsController.register(scope.title);
  scope.isActive = function (tabName) {
    document.getElementById("team_input").focus();
    return tabsController.isActive(tabName);
  };
}