Q8

Inputs and focus

by Preetha Srinivasan

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div ng-app="myapp" ng-controller="inputCtrl">
   <input id="id1" type="text" ng-model="id1" limit-to=5 ng-change="autoFocus('id1')"/> <br/>
   <input id="id2" type="text" ng-model="id2" limit-to=5 ng-change="autoFocus('id2')"/> <br/>
   <input id="id3" type="text" ng-model="id3" limit-to=5 ng-change="autoFocus('id3')"/> 
</div>

JavaScript

var app = angular.module('myapp',[]);

app.directive("limitTo", [function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            var limit = parseInt(attrs.limitTo);
            angular.element(elem).on("keypress", function(e) {
                if (this.value.length == limit) e.preventDefault();
            });
        }
    }
}]);

app.controller('inputCtrl', function ($scope) {
    $scope.id1 = '';
    $scope.id2 = '';
    $scope.id3 = '';
    var positionArr = {};
    positionArr["id1"] = {"next":"id2","prev":null};
    positionArr["id2"] = {"next":"id3","prev":"id1"};
    positionArr["id3"] = {"next":"id1","prev":"id2"};
      
    $scope.autoFocus = function(val){
     var value = $scope[val];
     var elementId = '';
     if (value.length == 5){
       elementId = positionArr[val].next;     
     } else if (value.length == 0){
       elementId = positionArr[val].prev;     
     }
     if (elementId != null){
       $("#" + elementId).focus();
     } 
      
    }
    
});