कोणीय

Question

के साथ अगले इनपुट टेक्स्ट पर फ़ोकस बदलें मेरे पास मेरे नियंत्रक (var myObject) में ऑब्जेक्ट वेरिएबल है, जो आईएचएम में 3 इनपुट टेक्स्ट में विभाजित है।

जब मैं केंद्रित अधिकतम लम्बाई तक पहुंच गया तो मैं स्वचालित रूप से अगले इनपुट पर फ़ोकस बदलना चाहता हूं।

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

आप इस के लिए एक निर्देश उपयोग करने की आवश्यकता होगी: इस प्रकार

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(); 
        } 
       } 
      }); 
     } 
    } 
}); 

और विधि को अपडेट:

<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 पर निर्देश इसके बजाय, लेकिन build-int jqLite की find() विधि आपको केवल टैग नाम से तत्व ढूंढने के लिए प्रतिबंधित करेगी। यदि आप पूर्ण jQuery का उपयोग कर रहे हैं, या इसके बजाय वेनिलाजेएस का उपयोग कर सकते हैं, तो मैं इस विधि का सुझाव दूंगा।

Answer 2

स्वीकृत उत्तर कार्य, लेकिन केवल तभी जब फ़ील्ड तत्काल भाई बहन हैं।

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(); 
      } 
     }); 
     } 
    } 
    } 
); 

प्रत्येक इनपुट क्षेत्र के लिए एक गिने "फोकस" आईडी जोड़ें:: इस उत्तर के लिए

<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> 

क्रेडिट उदाहरण के लिए आप वहाँ खुद कॉलम में प्रत्येक 3 क्षेत्रों है, तो आप एक अलग समाधान की जरूरत है: https://stackoverflow.com/a/33007493/3319392