使用AngularJS中的ui-keypress将焦点更改为下一个输入

时间:2013-09-20 09:01:56

标签: javascript angularjs

我在输入字段中使用ui-keypress指令来应用函数newline(),该函数在当前(聚焦)的字段下创建一个新的输入字段。它工作正常,但我想更新此功能,以便焦点跳转到新创建的字段。

这是我的index.html:

<!doctype html>
<html ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js">                                                       
    </script>
    <script src="script.js"></script>
    <script src="keypress.js"></script>
  </head>

  <body ng-controller="TextCtrl">

    <div  ng-repeat="task in tasks track by $index">
      <input type="text" class="form-control" ng-model="task.text" ui-keypress="{13:'newline($index+1)'}" >
    </div>

  </body>

</html>

这是script.js:

var myAppModule = angular.module('myApp', ['ui.keypress']);
myAppModule.controller('TextCtrl',function($scope){
var emptytask = '';
var tasks=[{text:'chart'}];
$scope.tasks = tasks;
$scope.newline = function(index){
    $scope.tasks.splice(index,0,{text:emptytask});
};
});

1 个答案:

答案 0 :(得分:2)

你可以在指令

中尝试这样的事情
.directive('focusOnLoad', function () {
    return {
     restrict: 'E',
     link: function (scope, element, attrs) {
        $timeout(function() {
          element.find('input').focus()
        },0);
     }
    }
 }

在HTML上执行

<div ng-repeat="task in tasks track by $index" focus-on-load>

在控制器中添加新任务。