admin管理员组

文章数量:1206255

I have the following simple <textarea>

<textarea id="streamWriter" rows="1" cols="20" placeholder="Writer"></textarea>

Also I have the following jQuery/JavaScript code block:

$('textarea#streamWriter').keydown(function (e) {
    if (e.keyCode == 13) {
        if (e.ctrlKey) {
            alert('ctrl enter - go down a line as normal return would');
            return true;
        }
        e.preventDefault();
        alert('submit - not your default behavior');
    }
});

I'm trying to force the not to create a new line break on normal return keydown. But I want this behavior if Ctrl+Enter was typed instead.

This does detect the difference but is not forcing the behavior that I need. If you've used Windows Live Messenger, I need the same textbox behavior. Enter to submit (In my case I will call a function but stop the textarea from going down a line) and Ctrl+Enter go down a line.

Solutions? Thanks.

Update:

$('textarea#streamWriter').keydown(function (e) {
    if (e.keyCode == 13) {
        if (e.ctrlKey) {
            //emulate enter press with a line break here.
            return true;
        }
        e.preventDefault();
        $('div#writerGadgets input[type=button]').click();
    }
});

The above does what I am trying to do. There is just the part to emulate enter press with a line break. Please let me know how to do this if you know.

I have the following simple <textarea>

<textarea id="streamWriter" rows="1" cols="20" placeholder="Writer"></textarea>

Also I have the following jQuery/JavaScript code block:

$('textarea#streamWriter').keydown(function (e) {
    if (e.keyCode == 13) {
        if (e.ctrlKey) {
            alert('ctrl enter - go down a line as normal return would');
            return true;
        }
        e.preventDefault();
        alert('submit - not your default behavior');
    }
});

I'm trying to force the not to create a new line break on normal return keydown. But I want this behavior if Ctrl+Enter was typed instead.

This does detect the difference but is not forcing the behavior that I need. If you've used Windows Live Messenger, I need the same textbox behavior. Enter to submit (In my case I will call a function but stop the textarea from going down a line) and Ctrl+Enter go down a line.

Solutions? Thanks.

Update:

$('textarea#streamWriter').keydown(function (e) {
    if (e.keyCode == 13) {
        if (e.ctrlKey) {
            //emulate enter press with a line break here.
            return true;
        }
        e.preventDefault();
        $('div#writerGadgets input[type=button]').click();
    }
});

The above does what I am trying to do. There is just the part to emulate enter press with a line break. Please let me know how to do this if you know.

• javascript
• jquery
• html

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Nov 18, 2011 at 18:47 user1027620user1027620 2,78566 gold badges4040 silver badges6969 bronze badges 1

• e.preventDefault in a keydown will not prevent the new line break in chrome. That was the purpose of the keypress event handler. – Kevin B Commented Nov 18, 2011 at 19:24

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 12

Using keypress instead of keydown works a little better, however will not work with the Ctrl key; I switched to the shift key - jsfiddle.

Edit: As far as I can tell, you won't be able to use Ctrl key consistently cross browser because the browser uses it for it's own short-cuts. You would run into the same situation with the alt key.

Edit again: I have a solution that works with the Ctrl key - jsfiddle.

$('textarea#streamWriter').keydown(function (e) {
    if (e.keyCode === 13 && e.ctrlKey) {
        //console.log("enterKeyDown+ctrl");
        $(this).val(function(i,val){
            return val + "\n";
        });
    }
}).keypress(function(e){
    if (e.keyCode === 13 && !e.ctrlKey) {
        alert('submit');
        return false;  
    } 
});

Edit: This doesn't work 100%, it only works if you are not in the middle of text. Gonna have to work on a way to have the code work on text in the middle.

By the way... Why are you doing it this way? Wouldn't it be confusing to the user if they pressed enter to make a new line and the form all of a sudden submitted before they were ready?

Clear VanillaJS:

document.querySelector('#streamWriter').addEventListener('keydown', function (e) {
    if (e.keyCode === 13) {
        // Ctrl + Enter
        if(e.ctrlKey) {
            console.log('ctrl+enter');

        // Enter
        } else {
            console.log('enter');
        }
    }
});

Kevin B's solution works well on Mac, but not on windows.

On windows, when ctrl +enter is pressed, the keyCode is 10 not 13.

Ctrl+Enter jQuery in TEXTAREA

本文标签： javascripttextarea controlcustom behavior enterctrlenterStack Overflow