Angularjs: отключить поведение клавиши табуляции

Question

Я разрабатываю таблицу входов.
Что я хочу: при использовании прессов '+' key (где курсор находится в строке таблицы) приложение добавляет новую строку в таблицу.
Он прекрасно работает как это сделать:

<tr ng-repeat="sell in sells" ng-keypress="newLine($event)"> 

Моя проблема заключается в том, что, когда пользователь нажимает клавишу табуляции во входе в строке, чтобы перейти к следующему входу, следующее значение входного выделен (который является нормальное поведение клавиши табуляции).
Затем, если пользователь нажимает '+', чтобы добавить новую строку, он заменяет значение ввода знаком '+'.

Я установил директиву, позволяющую пользователю вводить номер только на входах, но он не работает, когда выделено значение ввода.

angular.module('myApp').directive('numbersOnly', function($timeout) { 
    return { 
    require: 'ngModel', 
    link: function(scope, element, attrs, modelCtrl) { 
     modelCtrl.$parsers.push(function (inputValue) { 
      // this next if is necessary for when using ng-required on your input. 
      // In such cases, when a letter is typed first, this parser will be called 
      // again, and the 2nd time, the value will be undefined 
      if (inputValue == undefined) return '' 
      var transformedInput = inputValue.replace(/[^0-9.]+/g, ''); 
      if (transformedInput!=inputValue) { 
       modelCtrl.$setViewValue(transformedInput); 
       modelCtrl.$render(); 
      }   

      return transformedInput;   
     }); 
    } 
    }; 
}); 

<td style="width:59px"><input type="text" ng-model="sell.quantity" numbers-only enter-as-tab ></td> 

Если кто-то знает способ предотвратить пользователю заменить выделенное значение на «+» .... или отключить поведение по умолчанию вкладки ключа.

Спасибо заранее.

Answer 1

Вы можете переопределить действие по умолчанию клавиши «+» с помощью специальной директивы.

module.directive('overridePlusKey', ['$window', function ($window) { 
    // Linker function 
    return function (scope, element, attrs) { 
     element.bind('keydown', function (e) { 
     var keyCode = e.keyCode || e.which; 
     console.log(keyCode); 
     if (keyCode == 107 || keyCode == 187) 
     { 
      e.preventDefault(); 
      // Your code here to add a row 
     } 
     }); 
    }; 
    }]); 

Затем нанесите его на входы, как так:

<input type="text" ng-model="content" override-plus-key /> 

See here for an example

Answer 2

Это может быть лучше сделано с помощью формы проверки или даже ng-change обработчика, но если вы предпочитаете придерживаться существующей $parser методы вы можете вернуться к исходному значению, используя $modelValue:

angular.module('myapp', []).directive('numbersOnly', function($timeout) { 
 
    return { 
 
    require: 'ngModel', 
 
    link: function(scope, element, attrs, modelCtrl) { 
 
     modelCtrl.$parsers.push(function(inputValue) { 
 
     if (inputValue == undefined) return ''; 
 
     var transformedInput = inputValue.replace(/[^0-9.]+/g, ''); 
 
     if (transformedInput != inputValue) { 
 
      modelCtrl.$setViewValue(modelCtrl.$modelValue); 
 
      modelCtrl.$render(); 
 
      if (inputValue.indexOf('+') > -1) { 
 
      alert("Perhaps trigger your newLine() here"); 
 
      } 
 
      return modelCtrl.$modelValue; 
 
     } else { 
 
      return inputValue; 
 
     } 
 
     }); 
 
    } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myapp"> 
 
    <input type="text" ng-model="sell.quantity" numbers-only enter-as-tab> 
 
</div>

Пожалуйста, не пытайтесь отключить клавишу табуляции. Доступность имеет значение. (Так что пользователь ожидает, что ключ табуляции будет делать то, что обычно делает вкладка.)