角指令輸入和格式

我有一個指令，做幾件事情到一組6個單位文本輸入之間移動任何非字母字符 3.如果用戶按下退格鍵，則向後移動一個輸入，如果用戶按退格鍵兩次，則刪除前一個字符。角指令輸入和格式

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

這裏是UPDATED代碼。我如何獲得＃3所述的工作？

Here's a Fiddle (caps not working in the Fiddle but works locally for me)。

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

來源

2017-04-14 lilbiscuit

，因爲你設置了'值= '''它刪除輸入。沒有辦法知道用戶是否從一個** single **'keyup'事件連續按了兩次鍵...... – Claies

我添加了一個有條件的'shouldMoveBack'，所以光標不會移回到之前的輸入，除非它在之前的退格鍵「keyup」上被刪除。但它仍然會在每個backspace'keyup'上跳回。 – lilbiscuit

我想我需要檢測遊標是向前移動到輸入還是後退到它。 – lilbiscuit

悶頭前一個兄弟在第一種情況下，你可以防止退格鍵的默認行爲做event.preventDefault()並創建左箭頭鍵碼按鍵事件並手動觸發它實現了第一例＃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); 
      } 
     } 
    }

來源

2017-04-14 06:02:19 32teeths

從概念上講，這是有道理的，但會產生一個錯誤：'element.trigger不是函數' – lilbiscuit

左箭頭不會將光標移到上一個輸入。「後退」選項卡的作用是，但光標僅在一瞬間轉到之前的輸入，然後彈回。我仍然認爲這種方法將工作，所以我留在這條路上... – lilbiscuit

如果我是正確的，它應該是'element.triggerHandler（leftArrow）'指https://docs.angularjs.org/api/ng/function/ angular.element – 32teeths

角指令輸入和格式

回答

相關問題