AngularJS中的輸入事件屬性

我正在構建一系列輸入字段，它們在達到最大長度時會自動選項卡。這可以通過檢查ng-keyup事件上的值的長度來工作，但這有一個小問題，可以使用事件來解決。但是，這似乎並沒有出現在Angular中？AngularJS中的輸入事件屬性

我試圖解決的問題：

當我迅速進入角色的最大量（在我的情況下，兩個數字，可以輸入非常快）兩個字符後的第一個keyup大火被輸入和選項卡到下一個字段。第二個keyup僅在Tab鍵後註冊，因此會在下一個字段中觸發。這會導致不需要的行爲。

重現檢查this fiddle（jQuery，因爲它允許我快速重現問題和我正在尋找的解決方案），填寫「月」和「年」字段，然後在「日「字段。當完成得足夠快時，焦點一路跳到「年」（因爲第二個keyup被解僱，而「月」被關注）。

使用.on('input', ...)時，此問題消失。不過，我想用這個不是在jQuery中，而是在Angular中用作屬性，如ng-keyup。這是可能的，如果不是，我怎麼能以另一種方式解決這個問題？

來源

2015-04-03 Stephan Muller

這是一個指令裏面？你可以在指令中使用'.on（「input」，...）'，否？ – CodingIntrigue 2015-04-03 09:42:06

@Rraham我的問題並不完整，對不起。我想在元素上使用'ng-input =「myCallback（）」'屬性。 – 2015-04-03 09:54:56

看起來像你在jsfiddle中使用jquery。取而代之的是，要綁定oninput事件，您可以使用：

大多數情況下，這種DOM操作必須進入指令內部。只是爲了演示起見，我將它添加到控制器：

angular.element(document.querySelectorAll("input")).on("input", function (event) { 

    var $input = angular.element(event.target), 
     maxlength = $input.attr('max').length; 

    if (this.value.length >= maxlength) { 
     this.nextElementSibling.tagName==="INPUT" ? this.nextElementSibling.focus() : this.blur(); 
    } 

});

DEMO

來源

2015-04-03 09:49:05 mohamedrias

我正在使用jQuery來顯示問題以及我想如何修復它（但使用Angular代替），更新了問題以使其更加清晰。我想我無法使用你的答案，因爲我想用'ng-'屬性來綁定事件。 – 2015-04-03 09:56:20

現在檢查，我已經用演示更新了答案。您需要將該代碼放入適當的控制器中。您可以創建自定義指令，並通過該指令綁定事件。 – mohamedrias 2015-04-03 10:01:10

這似乎是一個整潔的解決方案，我希望有一個屬性，但由於缺乏這將不得不做。我會檢查這是否在我的代碼中工作。 – 2015-04-03 10:10:53

AngularJS中的輸入事件屬性

回答

相關問題