javascript - 新行在可编辑的 div 中不起作用

Question

这是HTML代码:

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

这是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;
        }
    });

我想通过按 Ctrl+Enter 来创建一个新行，但是它不起作用。光标没有移动。
JS FIDDLE

Answer 1

有一种方法可以让您使用它，我将在下面提供。我建议预先填充您的 <div>用<br />喜欢

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

虽然看起来很奇怪，但它为浏览器提供了一个“ anchor ”，可以将光标放在开始的位置上。如果您删除它并第一次尝试“添加新行”，您会注意到奇怪的行为。另外正如评论所建议的那样，您每次都在覆盖您的 html，这可能会产生大量开销和不良行为，具体取决于您的项目变得多么复杂，因此对于这个示例，我只是简单地附加 $(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;
        }
});