4

This is Html code:

<div id="messageBox" contenteditable="true" class="message"></div>

And this is jquery:

$('#messageBox').keydown(function(e) {
        if (e.ctrlKey && e.keyCode == 13)
        {
            $(this).html($(this).html() + "<br>");
        }
    }).keypress(function(e) {
        if(e.keyCode == 13)
        {
            $('#send').trigger('click');
            return false;
        }
    });

I want to create a new line by pressing Ctrl+Enter but it does not work.The cursor does not move.
JS FIDDLE

Mohsen Movahed
  • 418
  • 5
  • 22
  • 2
    That's because there's nothing after the `
    `. It gets inserted, but the browser doesn't display it. You can verify this by changing your `"
    "` to `"
    foo"`.     – elixenide Feb 01 '15 at 19:13
  • It's working fine for me, just tried your fiddle in both Chrome and Firefox – Azeirah Feb 01 '15 at 19:15
  • The cursor does not move. – Mohsen Movahed Feb 01 '15 at 19:18
  • 2
    Changing the whole HTML of the element is somewhat rude. You could use a Range object to [add a new-line](http://jsfiddle.net/yt8drrat/) anywhere in the contenteditable. – Teemu Feb 01 '15 at 19:45

2 Answers2

1

There is a way to get this working for you as I'll provide below. I would suggest pre populating your <div> with a <br /> like 

<div id="messageBox" contenteditable="true" class="message">
    <br />
</div>

Although thus looks weird, it gets the browser an "anchor" to place the cursor on to start. You'll notice odd behavior if you remove this and try to "add a new line" for the first time. Also as a comments suggest, you were overlaying your html each time, which could generate a lot of overhead and undesired behavior depending on how involved your project becomes, so for this example I simply append as such $(this).append('<br />')

JSFiddle Link

function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != 'undefined'
            && typeof document.createRange != 'undefined') {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != 'undefined') {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

$('#messageBox')
    .keydown(function(e) {
        if (e.ctrlKey && e.keyCode == 13) {            
            $(this).append('<br />');    
            placeCaretAtEnd($('#messageBox').get(0));
        }
    }).keypress(function(e) {
        if(e.keyCode == 13) {
            $('#send').trigger('click');
            return false;
        }
});
scniro
  • 16,844
  • 8
  • 62
  • 106
0

Sample works for me just fine. Make sure your browser supports contenteditable. Below is the list of browsers that do support it.

Chrome  4.0+
Safari  3.1+
Mobile Safari   5.0+
Firefox 3.5+
Opera   9.0+
Opera Mini/Mobile   N/A
Internet Explorer   5.5+
Android 3.0+

Also, in same cases you might need to wrap it in a container that has contenteditable="false".

The cursor is not going to move, since you're only appending the text. Check this on how to move the cursor to the end How can you move the cursor to the last position of a textarea in Javascript?

Community
  • 1
  • 1
Michael
  • 1
  • 1