odağı angularjs ile bir sonraki giriş metnine dönüştürün

Question

Denetleyicimde (var myObject) bir nesne değişkeni var, IHM'de 3 giriş metnine bölünmüş.

Odaklanan kişi maxLength'a ulaştığında odağı otomatik olarak bir sonraki girişe değiştirmek istiyorum.

var myObject = { 
    part1:"", 
    part2:"", 
    part3:"" 
} 



<form> 
    <input type="text" id="part1" ng-model="myObject.part1" maxlength="7"/> 
    <input type="text" id="part2" ng-model="myObject.part2" maxlength="12"/> 
    <input type="text" id="part2" ng-model="myObject.part2" maxlength="12"/> 
</form> 

Answer 1

Bunun için bir yönergeyi kullanmanız gerekir: şöyle

app.directive("moveNextOnMaxlength", function() { 
    return { 
     restrict: "A", 
     link: function($scope, element) { 
      element.on("input", function(e) { 
       if(element.val().length == element.attr("maxlength")) { 
        var $nextElement = element.next(); 
        if($nextElement.length) { 
         $nextElement[0].focus(); 
        } 
       } 
      }); 
     } 
    } 
}); 

Ve şeklinizi güncelleme: Sen hareket olabilir

<form> 
    <input type="text" id="part1" ng-model="myObject.part1" maxlength="7" move-next-on-maxlength /> 
    <input type="text" id="part2" ng-model="myObject.part2" maxlength="12" move-next-on-maxlength /> 
    <input type="text" id="part2" ng-model="myObject.part2" maxlength="12"/> 
</form> 

Demo

<form> eleme yönergesi nt yerine, ancak jqLite'ınyöntemine göre, yalnızca etiket adlarına göre öğeleri bulmanız kısıtlanır. Tam jQuery kullanıyorsanız veya bunun yerine vanillaJS'yi kullanabilirseniz, bu yöntemi öneririm.

Answer 2

Kabul edilen yanıt çalışır, ancak yalnızca alanlar hemen kardeşse.

angular 
.module('move-next-directive', []) 
.directive('moveNextOnMaxlength', 
    function() { 
    return { 
     restrict: "A", 
     link: function(scope, elem, attrs) { 
     elem.on('input', function(e) { 
      var partsId = attrs.id.match(/focus(\d+)/); 
      var currentId = parseInt(partsId[1]); 

      var l = elem.val().length; 
      if (l == elem.attr("maxlength")) { 
      nextElement = document.querySelector('#focus' + (currentId + 1)); 
      nextElement.focus(); 
      } 
     }); 
     } 
    } 
    } 
); 

her giriş alanına bir numaralı "odak" id ekleyin: Bu cevaba

<div class="row"> 
    <div class="col-xs-4"> 
    <input type="text" id="focus1" maxlength="4" move-next-on-maxlength /> 
    </div> 
    <div class="col-xs-4"> 
    <input type="text" id="focus2" maxlength="4" move-next-on-maxlength /> 
    </div> 
    <div class="col-xs-4"> 
    <input type="text" id="focus3" maxlength="4" /> 
    </div> 
</div> 

Kredi örneğin sen orada kendi sütununda 3 alanları her varsa, farklı bir çözüm gerekir: https://stackoverflow.com/a/33007493/3319392