Angularjs : disable tab key default behaviour
user1260928
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.
Adam Axtmann
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 />
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
Related
Related Related
- 1
angularjs tab key press prevent default
- 2
angularjs tab key press prevent default
- 3
Configuring the default behaviour of Super + Tab
- 4
Disable default option key binding
- 5
Can I disable the default behaviour `hg add` with no arguments?
- 6
Can I disable the default behaviour `hg add` with no arguments?
- 7
WinForms - Disable default mouse hover over item behaviour?
- 8
Is it possible to disable default behaviour of input type email validation
- 9
Sorting list of dictionaries---what is the default behaviour (without key parameter)?
- 10
JavaFX Textfield - Override default behaviour when up key is released
- 11
Disable matplotlib's default arrow key bindings
- 12
Android: how to disable default pop TabLayout animation on tab selection
- 13
Strange intellisense tab behaviour
- 14
Disable tab key focusing while Bootstrap modal is active
- 15
How to disable Tab key on particular column index of Datagridview?
- 16
Disable Javascript behaviour
- 17
Angularjs default action when Enter key is pressed
- 18
How to stop default action of tab key in HTML page
- 19
In Vimium, make opening in new tab default with `f` key
- 20
Trouble with active tab default using AngularJS, UI Boostrap, and UI Router
- 21
.htaccess default directory behaviour
- 22
Function pointer with default behaviour
- 23
What is the default behaviour of atime?
- 24
Makefile default behaviour
- 25
Strange default sort behaviour
- 26
null and default behaviour with immutables
- 27
AngularJs: Keyboard navigation using TAB key in different groups/forms/divs
- 28
Using the enter key as tab using only angularjs and jqlite
- 29
How can we provide default Back key press behaviour to a custom button tap event in Windows Phone 8?
Comments