Microsoft introduced great way to copy and paste data using Ctrl + C and Ctrl + V. Lets see how to implement this in AngularJS.
Program Flow
- Bind keydown and keyup status for window and keep track Ctrl button pressing status
- Bind keydown for the div which you want find Ctrl + C and Ctrl + V
- Use event.preventDefault in detecting Ctrl + S
Script
$scope.ctrlDown = false; $scope.ctrlKey = 17, $scope.vKey = 86, $scope.cKey = 67; $scope.keyDownFunc = function($event) { if ($scope.ctrlDown && ($event.keyCode == $scope.cKey)) { alert('Ctrl + C pressed'); } else if ($scope.ctrlDown && ($event.keyCode == $scope.vKey)) { alert('Ctrl + V pressed'); } else if ($scope.ctrlDown && String.fromCharCode($event.which).toLowerCase() == 's') { $event.preventDefault(); alert('Ctrl + S pressed'); } }; angular.element($window).bind("keyup", function($event) { if ($event.keyCode == $scope.ctrlKey) $scope.ctrlDown = false; $scope.$apply(); }); angular.element($window).bind("keydown", function($event) { if ($event.keyCode == $scope.ctrlKey) $scope.ctrlDown = true; $scope.$apply(); });
Thank you very much. :)
ReplyDeleteI've a question, how can I do it for Ctrl + S event? I changed $scope.sKey = 115 since s is 115 but I couldn't get alert message. Instead, it open browser default save action.
ReplyDeleteThanks for your comment. Now I have added Ctrl + S functionality also. Find above code
DeleteHi Dasari Srinivas
ReplyDeleteI'm searching for this. Thank you very much.
@HostListener('window:keydown', ['$event'])
ReplyDeletekeyEvent(event: KeyboardEvent) {
if (event.ctrlKey && event.keyCode == 83)
{
}
}
this is latest and easy to implement