新行在可编辑的 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

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

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

虽然看起来很奇怪，但它为浏览器提供了一个“锚点”，可以将光标置于启动位置。如果您删除它并第一次尝试“添加新行”，您会注意到奇怪的行为。此外，正如 cmets 所建议的那样，您每次都在覆盖您的 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;
        }
});

Answer 2

示例对我来说很好用。确保您的浏览器支持 contenteditable。以下是支持它的浏览器列表。

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+

此外，在相同情况下，您可能需要将其包装在具有 contenteditable="false" 的容器中。

光标不会移动，因为您只是在附加文本。检查这里如何将光标移动到末尾How can you move the cursor to the last position of a textarea in Javascript?