Trigger other key rather than original key using angularjs

Question

I am try to trigger " ` " keyCode = 192 when I press " enter " keyCode = 13. I am trying below code but it is not working in contenteditable div. Any idea? And how to $apply this?

$scope.pressKey = function(event){
if(event.keyCode == 13){

    event.preventDefault();
    var e=angular.element.Event('keydown');
    console.log(e);
    e.which=192;
    $('#regularDot').trigger(e);


    } 

<div id="regularDot" ng-keypress="pressKey($event)" class="wf-loading" 
ng-model="regularDot" contenteditable="true" n></div>

Possible duplicate of [How to catch event.keyCode and change it to another keyCode?](https://stackoverflow.com/questions/8776543/how-to-catch-event-keycode-and-change-it-to-another-keycode) — Elmer Dantas, Nov 18 '17 at 10:04

score 0 · Answer 1 · answered Nov 19 '17 at 16:31

Don't use pure JS methods like KeyboardEvent() it has cross browser support issues, use jQuery instead.

Now angular.element has basic support of jquery but it does not support Event() method which you used. So best approach is having jquery library in your codebase (with its script tag attached before angularjs in index.html). Then change your code to as follows:

$scope.pressKey = function(event) {
    if (event.keyCode == 13) {

        event.preventDefault();
        var e = jQuery.Event('keypress');
        console.log(e);
        e.which = 192;
        e.keyCode = 192;
        $timeout(function() {
            $('#regularDot').trigger(e);
        });
    } else if(event.keyCode == 192){
        console.log("Newly triggered event catched with keyCode " + event.keyCode);
    }
}

Here I've made just few changes like adding trigger method inside $timeout so that it'll wait small time to complete the preventDefault of previously triggered event before setting (triggering) new event, and doing $apply also. I've changed newly triggered event type to keypress instead of keydown so that after triggering event you'll be able to handle it using ng-keypress on that element (with id regularDot).

Similar plunker example to refer.

Trigger other key rather than original key using angularjs

1 Answers1