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>

虽然看起来很奇怪，但它会让浏览器成为一个＆＃34;锚点＃34;将光标置于开始位置。如果你删除了这个并尝试＆＃34;添加一个新行＆＃34;你会注意到奇怪的行为。首次。另外，正如评论建议的那样，每次都覆盖你的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?

新行不适用于可编辑的div

2 个答案:

JSFiddle Link