How to push cursor to the next line when user hits ctrl + enter?

Question

I'm working on a textarea, where if the user hits enter, it causes the form to submit, but if he hits ctrl + enter, I want it to move to the next line.

This is the code that I'm using, within my function which is called on keypress by jquery:

if ( (e.keyCode == 10 || e.keyCode == 13) && e.ctrlKey)
    //move to next line here

Any ideas how to do this?

Couldn't you just use e.preventDefault(); and then add \n to the textarea value? — valscion, Aug 02 '12 at 14:11
I would appreciate, if you would add more example code, the textarea, the binding etc. Bonus points for giving us a jsfiddle snippet :) — Robin Drexler, Aug 02 '12 at 14:11

Ricardo Alvaro Lohmann · Answer 1 · 2012-08-02T14:21:56.370

2

$('.parentElementClass').on('keyup', 'textarea', function(e) {
    if(e.ctrlKey && (e.which == 13 || e.keyCode == 13)) {
        $(this).val(function(i, val) {
            return val + '\n';
        });
    }
});

demo

edited Aug 02 '12 at 14:21

answered Aug 02 '12 at 14:15

Ricardo Alvaro Lohmann

26,031
7
82
82

1

`e.preventDefault()` will do nothing here since `keyup` is not a cancelable event. – gilly3 Aug 02 '12 at 14:19

score 1 · Accepted Answer · edited May 23 '17 at 10:34

It's all set now! Breakline at any point & it maintains position (all while trying to use the most up to date browser techniques with fallbacks for IE, etc).

UPDATED x2 - jsFiddle link

$('#sillyTextarea').keydown(function (e) {

    if (e.keyCode === 10 || e.keyCode  == 13 && e.ctrlKey) {
        // Ctrl-Enter pressed
        // keyCode 10 is actually for Chrome (whacky I know...)

        var el = document.getElementById('sillyTextarea'),
            allText = $(this).val(),
            currentPos = getCaret(el),
            beforeText = allText.substr(0, currentPos),
            afterText = allText.substr(currentPos);

        $(this).val(beforeText + '\n' + afterText);

        setCaretPosition(el, currentPos);
    }
});

With help of 2 functions

function getCaret(el) { }

Caret position in textarea, in characters from the start

function setCaretPosition(el, caretPos) { }

Set keyboard caret position in html textbox

Should be all set! Any reason why shift-enter doesn't work already? — Mark Pieszak - Trilon.io, Aug 02 '12 at 14:45

How to push cursor to the next line when user hits ctrl + enter?

2 Answers2