CODEWITHSUNDEEP
javascriptdom-eventskeypresskeyboard-events
Christian
Christian

Reputation: 7852

Handling Alt + Enter key press in JavaScript

I'm trying to get some pure JavaScript code to handle Alt + Enter key press event in a text area but am failing miserably. What is wrong?

Html

<textarea id="ta" style="width:100%;height:500px">
</textarea>

JavaScript

var ta = document.getElementById('ta');
ta.onkeypress = function(e) {
   if (e.charCode == 10 && e.altKey){
      alert(
         "Key Pressed: " + String.fromCharCode(e.charCode) + "\n"
          + "charCode: " + e.charCode + "\n"
          + "Alt key pressed: " + e.altKey + "\n"
      );      
   }
};

JSFiddle

Here

Upvotes: 1

Views: 8714

Answers (3)

Christian
Christian

Reputation: 7852

This solution, which is based on this example in the MDN documentation seems to be the most cross-browser friendly way:

var ta = document.getElementById('ta');
ta.onkeydown = function (event) {
    if (event.defaultPrevented) {
       return;
    }
    var handled = false;
    if (event.key !== undefined) {
       if (event.key === 'Enter' && event.altKey) {
          alert('Alt + Enter pressed!');
       }
    } else if (event.keyIdentifier !== undefined) {
       if (event.keyIdentifier === "Enter" && event.altKey) {
          alert('Alt + Enter pressed!');
       }

    } else if (event.keyCode !== undefined) {
       if (event.keyCode === 13 && event.altKey) {
          alert('Alt + Enter pressed!');
       }
    }
    if (handled) {
       event.preventDefault();
    };
};

Updated fiddle

Upvotes: 1

RichieHindle
RichieHindle

Reputation: 281515

Enter is key code 13, you need keydown or keyup, not keypress (which is for printable characters), and you should use keyCode rather than charCode. Like this:

ta.onkeydown = function(e) {
    if (e.keyCode == 13 && e.altKey) { ...

Upvotes: 5

MildlySerious
MildlySerious

Reputation: 9170

Simple fix: Use the keyCode instead of the charCode. The keyCode for ENTER is 13.

var ta = document.getElementById('ta');
ta.onkeypress = function(e) {
   if (e.keyCode == 13 && e.altKey){
      alert(
         "Key Pressed: " + String.fromCharCode(e.charCode) + "\n"
          + "keyCode: " + e.keyCode + "\n"
          + "Alt key pressed: " + e.altKey + "\n"
      );      
   }
};

Upvotes: 3

Related Questions