jquery ctrl+enter as enter in text area

Question

Hello All,

I am trying to reproduce standard instant messenger behavior on TEXT area control: enter works as send button. ctrl+enter as real enter.

 $("#txtChatMessage").keydown(MessageTextOnKeyEnter);
 function MessageTextOnKeyEnter(e)
 {
    if (!e.ctrlKey && e.keyCode == 13)
    {
       SendMessage();
       return false;
    }
    else if(e.keyCode == 13)
    {
       $(this).val($(this).val() + "\n");
    }
    return true;
 }

I have tried with both commented line and without. Not works. simple enter works as expected. Any ideas how to add enter on ctrl+enter?

key code is not problem. they are detected correctly. so all if's works as expected. But appending new line works incorrectly (in FF, Chrome works correctly). So I need correct multibrowser way to insert new line symbol to textarea. If without adding string manually (by some event based on ctrl+enter) it will be better.

changing on keypress event has no effect. "\r\n" not helped.

test page located here

Answer 1

A few potential causes:

Define the function before you reference it.

Make sure you're binding the event in the document.ready event, so that the dom item exists when you reference it.

Change else (e.keyCode == 13) to else if (e.keyCode == 13).

Make sure this is a textarea, not an input[type=text].

Consider using keypress instead of keydown.

Some browsers will send keyCode == 10 instead of keyCode == 13 when using the ctrl modifier key (some browsers will send it even when you aren't using the ctrl modifier key).

Answer 2

wow what a pain in the ass. i've been playing with this for a while and i have to assume this is just IE being uncooperative. anyway, this is the best i could do this morning and it's super hacky, but maybe you can gain something from it.

explanation: i'm testing with ie8, a textarea element, and courier new. results may vary. ascii character 173 (0xAD) does not display a character, although it counts as a character when moving your cursor around. appending this char after you force a newline gets ie to move the cursor down. before the call to SendMessage we replace the extra char with nothing.

function MessageTextOnKeyEnter(e) 
 { 
    var dummy = "\xAD";
    if (!e.ctrlKey && e.keyCode == 13) 
    { 
        var regex = new RegExp(dummy,"g");
        var newval = $(this).val().replace(regex, '');
        $(this).val(newval);

       SendMessage(); 
       return false; 
    } 
    else if(e.keyCode == 13) 
    { 
       $(this).val($(this).val() + "\n" + dummy); 
    } 
    return true; 
 } 

if you try to do the replacement on every keystroke it's not going to work very well. you might be able to deal with this by white/blacklisting keys and find a method to put the cursor back in the text where it's supposed to go.

Answer 3

You can check for the ctrl and alt as in

$(document).ready(function() {
    $('#myinput').keydown(function(e) {
        var keysare = 'key code is: ' + e.which + ' ' + (e.ctrlKey ? 'Ctrl' : '') + ' ' + (e.shiftKey ? 'Shift' : '') + ' ' + (e.altKey ? 'Alt' : '');
        //alert(keysare);
        $('#mycurrentkey').text(keysare);
        return false;
    });
});

See a working example here: http://jsfiddle.net/VcyAH/

Answer 4

The following will work in all the major browsers, including IE. It will behave exactly as though the enter key had been pressed when you press ctrl-enter:

function MessageTextOnKeyEnter(e) {
    if (e.keyCode == 13) {
        if (e.ctrlKey) {
            var val = this.value;
            if (typeof this.selectionStart == "number" && typeof this.selectionEnd == "number") {
                var start = this.selectionStart;
                this.value = val.slice(0, start) + "\n" + val.slice(this.selectionEnd);
                this.selectionStart = this.selectionEnd = start + 1;
            } else if (document.selection && document.selection.createRange) {
                this.focus();
                var range = document.selection.createRange();
                range.text = "\r\n";
                range.collapse(false);
                range.select();
            }
        }
        return false;
    }
}