ANGULAR Переместить фокус расслоение плотной к следующему полю ввода, когда максимальная длина символа достигла и перемещения фокуса на предыдущее поле ввода, когда длина символа минимальна

Question

My Task

Создание 3 входа, каждый с максимальным полукокса. длина 5 При вводе 5-го символа. во вводе курсор должен перейти к следующему входу сразу после ввода символа. При удалении 1-го символа ввода курсор должен перейти в конец предыдущего ввода сразу после удаления символа.

То, что я сделал

Создано 3 поля ввода и ограничило длину символов до 5 с помощью часовой группы и он прекрасно работает

Моя проблема

Мне нужно, чтобы переместить мой курсор к следующему входу поле, когда поле ввода достигает максимальной длины символа 5, и если первый символ был удален из поля ввода, курсор должен автоматически перейти на предыдущее поле ввода поля

моя ссылка на плункер повторно https://plnkr.co/edit/Bcq6slz9gbK8r6Lm8MAh?p=preview

Мой угловой Код

var app = angular.module("task8", []); 
app.controller("taskController8",["$scope", function ($scope) { 

$scope.charLength=5 

$scope.$watchGroup(['firstInput', 'secondInput', 'thirdInput'], function (newValue, oldValue) { 
    if (newValue) { 
     if (newValue[0].length > 5) { 
      $scope.firstInput = oldValue[0]; 
     } 
     else if (newValue[1].length > 5) { 
      $scope.secondInput = oldValue[1]; 
      newValue[2].focus(); 
     } 
     else if (newValue[2].length > 5) { 
      $scope.thirdInput = oldValue[2]; 
    } 
     $scope.charLength = 5 - newValue[0].length; 
     $scope.charLength = 5 - newValue[1].length; 
     $scope.charLength = 5 - newValue[2].length; 
    } 
}) 

$scope.updateBody = function (event) { 
    return false; 
}; 
}]); 

Answer 1

Вот рабочий пример с AngularJS Directive:

angular 
 
    .module('MyApp', []) 
 
    .directive('moveFocus', function() { 
 
    function getCaretPosition(elem) { 
 
     // Internet Explorer Caret Position 
 
     if (document.selection && document.selection.createRange) { 
 
     var range = document.selection.createRange(); 
 
     var bookmark = range.getBookmark(); 
 
     return bookmark.charCodeAt(2) - 2; 
 
     } 
 

 
     // Firefox Caret Position 
 
     return elem.setSelectionRange && elem.selectionStart; 
 
    } 
 

 
    return { 
 
     restrict: 'A', 
 
     link: function(scope, elem, attr) { 
 
     var tabindex = parseInt(attr.tabindex); 
 
     var maxlength = parseInt(attr.maxlength); 
 

 
     elem.on('input, keydown', function(e) { 
 
      var val = elem.val(), 
 
       cp, 
 
       code = e.which || e.keyCode; 
 

 
      if (val.length === maxlength && [8, 37, 38, 39, 40, 46].indexOf(code) === -1) { 
 
      var next = document.querySelectorAll('#input' + (tabindex + 1)); 
 
      next.length && next[0].focus(); 
 
      return; 
 
      } 
 

 
      cp = getCaretPosition(this); 
 
      if ((cp === 0 && code === 46) || (cp === 1 && code === 8)) { 
 
      var prev = document.querySelectorAll('#input' + (tabindex - 1)); 
 
      e.preventDefault(); 
 
      elem.val(val.substring(1)); 
 
      prev.length && prev[0].focus(); 
 
      return; 
 
      } 
 
     }); 
 
     } 
 
    }; 
 
    });

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="MyApp"> 
 
    <form name="form"> 
 
    <div class="form-group"> 
 
     <label for="input1">Input 1</label> 
 
     <input type="text" class="form-control" id="input1" name="input1" tabindex="1" maxlength="5" move-focus placeholder="Input 1"> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="input2">Input 2</label> 
 
     <input type="text" class="form-control" id="input2" name="input2" tabindex="2" maxlength="5" move-focus placeholder="Input 2"> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="input3">Input 3</label> 
 
     <input type="text" class="form-control" id="input3" name="input3" tabindex="3" maxlength="5" move-focus placeholder="Input 3"> 
 
    </div> 
 
    </form> 
 
</div>