將焦點更改爲angularjs的下一個輸入文本

我在我的控制器（var myObject）中有一個對象變量，在IHM中分爲3個輸入文本。將焦點更改爲angularjs的下一個輸入文本

我想在焦點到達最大長度時將焦點自動更改爲下一個輸入。

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>

來源

2015-02-11 Karim Oukara

也許，以下可能會有所幫助：http://stackoverflow.com/questions/18086865/angularjs-move-focus-to-next-control-on-enter – 2016-04-30 22:03:51

你需要使用這個指令：

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 nt來代替，但build-int jqLite的find()方法將限制您僅通過標記名稱查找元素。如果你使用完整的jQuery，或者可以使用vanillaJS，我會建議這種方法。

來源

2015-02-11 08:49:34 CodingIntrigue

謝謝你，我的朋友！ – 2015-02-12 08:20:45

謝謝你，但你不能比較'int'和'String'：應該是： if（element.val（）。length == element [0] .maxLength）... – grindking 2016-09-05 08:34:23

@grindking當然你可以，這是Javascript！ :)'12 ==「12」'。只要你不使用*嚴格*平等，你通常會很好。 – CodingIntrigue 2016-09-05 08:39:09

接受的答案是有效的，但前提是這些字段是直接的兄弟姐妹。例如，如果你有每3個領域中有自己的專欄，你需要一個不同的解決方案：

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

添加帶編號的「焦點」的ID給每個輸入字段：

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

貸這樣的回答： https://stackoverflow.com/a/33007493/3319392

來源

2017-05-30 09:32:43 Jette

我用這個版本作爲我的投入在不同跨度，謝謝。我不得不改變你的正則表達式，以允許超過10個元素，這允許無限數量的名稱焦點*：'var partsId = attrs.id.match（/ focus（\ d +）/）;' – 2017-09-26 19:00:06

謝謝@eric .. 。我按照建議編輯了代碼，以允許無限數量的焦點字段。 – Jette 2017-09-27 13:36:49

將焦點更改爲angularjs的下一個輸入文本

回答

相關問題