AngularJS execute method on ng-keypress: Ctrl + Enter

Question

I would like to submit text on click on the Ctrl + Enter, but I could not find out how to do that. My code 100% works for Enter or Ctrl separate keypress, for example:

<div ng-show="hiddenFriendId != null" ng-keydown="$event.which === 13 && sendMessage()">
    <textarea id="messageText" placeholder="Input your message here. Use Ctrl + Enter to send your message" cols="40" rows="3" my-maxlength="3" ng-model="messageText"></textarea>
</div>

But while I'm trying something like -

<div ng-show="hiddenFriendId != null" ng-keydown="($event.which === 13 && $event.which === 17) && sendMessage()">

it is not working (method execution begins on click on the Enter without Ctrl). Can anybody help me with that? I found examples only for a single keypress.

Possible duplicate of [AngularJS - Multiple keypress at the same time](http://stackoverflow.com/questions/23160124/angularjs-multiple-keypress-at-the-same-time) — cnorthfield, Mar 28 '17 at 21:39
Yes, I could implement it as a directive, but, I just want to make sure that there are no simpler ways.. — Aleksey Kiselev, Mar 28 '17 at 21:49

score 3 · Answer 1 · answered Nov 08 '18 at 09:39

You can do this with

// Inside your controller

public keyDownEvent = ($event) => {
  if ($event.ctrlKey && $event.keyCode === 13) {
      this.submit();
  };
}

<!-- In your template -->

<input type="text" value="inputValue" ng-keydown="$panelRow.keyDownEvent($event)">

score 1 · Answer 2 · edited Aug 14 '19 at 06:33

1

No need of writing lines of code just insert code snippet

<input type="text" placeholder="Write a comment" ng-model="data" ng-keypress="($event.charCode==10)? myfunc() : return">

try using above code for Ctrl+Enter press event in the below link

https://jsfiddle.net/smqud8g0/2/

edited Aug 14 '19 at 06:33

Jitesh Prajapati

2,533
4
29
51

answered Aug 14 '19 at 06:12

ramgopaln

11
2

score 0 · Answer 3 · answered Sep 22 '17 at 15:38

I had the same question and found a simple solution here https://codepen.io/y__b__y/pen/afFec

All you have to do is create a custom directive on the attribute and use it. It worked like a boss for me:

DIRECTIVE

var app = angular.module('yourApp', []);

app.directive('enterSubmit', function () {
    return {
      restrict: 'A',
      link: function (scope, elem, attrs) {       
        elem.bind('keydown', function(event) {
          var code = event.keyCode || event.which;

          if (event.ctrlKey && code === 13) {
            if (!event.shiftKey) {
              event.preventDefault();
              scope.$apply(attrs.enterSubmit);
            }
          }
        });
      }
    }
  });

HTML

<textarea enter-submit="sendMessage()" /></textarea>

Hope this helps!

score 0 · Answer 4 · edited Apr 27 '18 at 20:09

0

If you need Ctrl + Enter you could use if (($event.code == "Enter" && $event.which === 10)) If you need Shift + Enter you could use if (($event.shiftKey && $event.which === 13))

edited Apr 27 '18 at 20:09

Developer Guy

2,318
6
19
37

answered Apr 27 '18 at 19:41

Slava Elantsev

81
1
6

AngularJS execute method on ng-keypress: Ctrl + Enter

4 Answers4