Winkel Weg in den nächsten Eingang zu konzentrieren

Question

Ich muss ein paar Eingabezeichen wie erforderlich validieren und wenn alle von ihnen eingegeben werden, würde ich einen Ajax-Aufruf machen, um zu überprüfen, ob die Kombination von ihnen korrekt ist oder nicht auf dem Server.

Das Problem, mit dem ich festhalte, ist, ich muss den Fokus auf die nächste Eingabe verschieben, sobald der Benutzer fertig ist die Eingabe des Zeichens.

Ich kann dies leicht mit jQuery oder Javascript, aber ich muss es mit AngularJs, in einer richtigen "Angular Way" tun.

Sachen, die ich bisher versucht habe, ist wie folgt.

Mein HTML

var myApp = angular.module("myApp", []); 
 

 
myApp.controller("myController", ["$scope", function myController($scope) { 
 
    $scope.verify = function verify() { 
 
    //here I would have my code to verify the combination of characters entered by the user 
 
    }; 
 
}]); 
 

 
myApp.directive("moveToNext", function() { 
 
    return { 
 
     restrict: 'A', 
 
     require: ['ngModel'], 
 
     link: function (scope, element, attrs, ctrls) { 
 
      element.bind("keydown keypress", function (event) { 
 
       if (element[0].value.trim().length > 0) { 
 

 
       } 
 
      }); 
 
     } 
 
    }; 
 
});

.code-character { 
 
    width:25px; 
 
    margin-right: 5px; 
 
    border: solid lightgrey 2px; 
 
    text-align:center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script> 
 
<table ng-app="myApp" ng-controller="myController"> 
 
\t \t <tr> 
 
\t \t \t <td> 
 
\t \t \t \t <input type="text" class="code-character" maxlength="1" ng-model="firstCharacter" name="firstCharacter" required autofocus move-to-next="verify()" /> 
 
\t \t \t </td> 
 
\t \t \t <td> 
 
\t \t \t \t <input type="text" class="code-character" maxlength="1" ng-model="secondCharacter" name="secondCharacter" required autofocus move-to-next="verify()" /> 
 
\t \t \t </td> 
 
\t \t \t <td> 
 
\t \t \t \t <input type="text" class="code-character" maxlength="1" ng-model="thirdCharacter" name="thirdCharacter" required autofocus move-to-next="verify()" /> 
 
\t \t \t </td> 
 
\t \t \t <td> 
 
\t \t \t \t <input type="text" class="code-character" maxlength="1" ng-model="fourthCharacter" name="fourthCharacter" required autofocus move-to-next="verify()" /> 
 
\t \t \t </td> 
 
\t \t \t <td> 
 
\t \t \t \t <input type="text" class="code-character" maxlength="1" ng-model="fifthCharacter" name="fifthCharacter" required autofocus move-to-next="verify()" /> 
 
\t \t \t </td> 
 
\t \t \t <td> 
 
\t \t \t \t <input type="text" class="code-character" maxlength="1" ng-model="sixthCharacter" name="sixthCharacter" required autofocus move-to-next="verify()" /> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t </table>

Wie finde ich und auf das nächste Element konzentrieren, sobald sie einen gewissen Wert hat?

Answer 1

können Sie neben leeren Eingang mit jquery

element.bind("keydown keypress", function (event) { 
    if (element[0].value.trim().length > 0) { 
     $(element).closest('tr').find('input').each(function(){ 
      if($(this).val().length === 0){ 
      $(this).focus(); 
      return false; 
      } 
     }) 
    } 
});