Angularjs : disable tab key default behaviour

Question

I am developping a table of inputs.
What I want is : when use presses '+' key (wherever the cursor is in the table row), the app adds a new line in the table.
It works fine doing this :

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

My problem is that when user presses tab key in an input of the row to go to next input, the next input value is highlighted (which is the normal behaviour of tab key).
Then if user presses '+' to add a new line, it replaces the value of the input by the '+' sign.

I have set up a directive to allow user only to type number in the inputs, but it doesnt work when the input value is highlighted.

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>

If someone knows a way to prevent user from replacing highlighted value by the '+'.... or to disable the default behaviour of tab key.

Thanks in advance.

Can't you use <input type="number" /> instead of var transformedInput = inputValue.replace(/[^0-9.]+/g, ''); ? — pomeh
– pomeh, Commented Jan 19, 2016 at 15:27
the problem with type number is the same, if the value is highlighted, to press '+' puts an empty value in the input — user1260928
– user1260928, Commented Jan 20, 2016 at 14:11

Adam Axtmann · Accepted Answer · 2016-01-19 15:31:40Z

2

You can override the default action of the '+' key using a custom directive.

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

Then apply it to the inputs like so:

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

See here for an example

answered Jan 19, 2016 at 15:31

Adam Axtmann

2361 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel Beck · Accepted Answer · 2016-01-19 15:23:28Z

This might be better done using form validation or even an ng-change handler, but if you prefer to stick to your existing $parser method you can revert to the original value using $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>

Please don't try to disable the tab key. Accessibility matters. (So does the user expectation that the tab key will do what the tab key normally does.)

Collectives™ on Stack Overflow

Angularjs : disable tab key default behaviour

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related