Question

我有一个指令可以对一组六位数字文本输入执行几项操作：

1如果用户输入小写字母字符，则将输入大写 2.拒绝任何非字母字符 3.如果用户按退格键，则返回一个输入，如果用户按两次退格键，则删除前一个字符。

第1项和第2项有效，但第3项没有按预期工作。现在，退格转到上一个输入并在一步中删除输入。

这是更新的代码。如何按照描述使＃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
    }
  };
})

Answer 1

您可以通过执行event.preventDefault()来防止退格的默认行为，并使用左箭头的keyCode创建一个按键事件并手动触发它以实现第一种情况，而不是关注第一种情况的前一个兄弟＃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);
            }
        }
    }

Angular指令在输入和格式之间移动

1 个答案: