Angularjs：禁用tab键默认行为

我正在开发一个输入表。
我想要的是：当使用按‘+’键 （光标在表格行中的任何地方）时，应用程序在表格中添加一个新行。
它做得很好：

我的问题是，当用户在行的输入中按Tab键转到下一个输入时，下一个输入值将突出显示 （这是tab键的正常行为）。
然后，如果用户按“+”添加新行，它将用“+”符号替换输入值。

我已经设置了一个指令，允许用户只在输入中键入数字，但是当输入值突出显示时它不起作用。

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

如果有人知道阻止用户用’+’替换突出显示值的方法….或者禁用tab键的默认行为。

提前致谢。

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

然后将它应用于输入，如下所示：

请看这里的例子

Answer 2

使用表单validation甚至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; } }); } }; });