在輸入和格式之間移動的Angular指令

Question

我有一條指令可以對一組六個單位數字的文本輸入執行幾項操作：

1如果用戶輸入小寫字母字符，則將輸入大寫。2.拒絕任何非字母字符。3.如果用戶按Backspace鍵，退回一個輸入；如果用戶按兩次Backspace鍵，則刪除前一個字符。

項目1和2起作用，但是項目3不能按預期工作。 現在，退格轉到上一個輸入，並一步刪除該輸入。

這是更新的代碼。 如何使＃3像描述的那樣工作？

這是一個小提琴（琴帽不在小提琴中工作，但為我本地工作） 。

<input class="code-char" type="text" maxlength="1" ng-model="code[0]" capitalize>
<input class="code-char" type="text" maxlength="1" ng-model="code[1]" capitalize>
<input class="code-char" type="text" maxlength="1" ng-model="code[2]" capitalize>

.directive('capitalize', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, modelCtrl) {
      var capitalize = function(inputValue) {
        if (inputValue == undefined) inputValue = '';
        var charString = inputValue.replace(/[^a-zA-Z]/g, ''); //to reject non-alphabet characters
        var shouldDelete = false;
        var shouldMoveBack = true;
        element.bind('keyup', function(event) {
          var key = event.keyCode;
          if(key === 8) {
            if(shouldDelete == true) {
              shouldDelete = false;
              element[0].value ='';
            } else {
              shouldDelete = true;
              if(!scope.$first && shouldMoveBack == true) {
                element[0].previousElementSibling.focus();
                shouldMoveBack == false;
              } else {
                shouldMoveBack == true;
              }
            }
          } else {
             if(charString > '') element[0].nextElementSibling.focus();
          }
        });
        var capitalized = charString.toUpperCase();
        if (capitalized !== inputValue) {
          modelCtrl.$setViewValue(capitalized);
          modelCtrl.$render();
        }
        return capitalized;
      }
      modelCtrl.$parsers.push(capitalize);
      capitalize(scope[attrs.ngModel]); // capitalize initial value
    }
  };
})

Answer 1

您可以通過執行event.preventDefault()並使用向左箭頭的keyCode創建一個keypress事件並手動觸發它來實現＃3的第一種情況，而不用關注第一種情況下的前一個兄弟行為。 對於第二種情況，您可以保留一個計數器，以查看是否第二次按下了退格鍵並觸發默認行為。 檢查以下示例。

    var count = 0;
    var leftArrow = $.Event("keyup");
    leftArrow.which = 37;//37 being the keycode of left arrow

    element.bind('keyup', function (event) {
        var key = event.keyCode;
        // 37 , 8
        if (key === 8) {// if it is backspace
            count++;
            if (count > 1) {
                count = 0;
            } else {
                // prevent the default behaviour
                event.preventDefault();
                // create a left arrow keypress event
                element.triggerHandler(leftArrow);
            }
        }
    }