1

我有一个内容可编辑的 div，其中包含元素。我想要发生的是在按下回车键时插入符号当前所在的元素之后立即创建一个新的段落标签。当我按下回车键时我可以创建段落标签，但我希望插入符号放在段落标签文本的末尾，就在结束之前 </p>

这是一个演示：

http://jsfiddle.net/qcf4d/1/

$(document).on('keypress', 'div[contenteditable="true"]', function(event) {


  //enter key
  if (event.which == 13) {
    //insert the paragraph after this element.
    $(window.getSelection().anchorNode.parentNode).after("<p>cool</p>");
  }

});

想法？我认为 jquery focus() 函数会派上用场。

4

2 回答 2

1

有一个小故障：第一个“酷”总是得到光标，因为你是通过“id”得到的。为了避免这个问题，我<p>cool</p>在添加元素之前创建了一个元素，然后使用它来定位新的光标位置。

$(document).on('keypress', 'div[contenteditable="true"]', function(event) {

    if (event.which == 13) { // enter key
        event.preventDefault();

        //insert the paragraph after this element.
        var innerDiv = $("<p>cool</p>")
        var sel = window.getSelection()
        $(sel.anchorNode.parentNode).after(innerDiv);

        //set cursor at new position
        sel.collapse(innerDiv[0].firstChild, innerDiv.text().length);
    }    
});

JSFiddle

还有一个没有 jQ 的版本：

document.querySelector('div[contenteditable="true"]').addEventListener('keypress', function(event) {

    if (event.which == 13) { // enter key
        event.preventDefault();

        //insert the paragraph after this element.
        var innerDiv = document.createElement('p')
        innerDiv.innerHTML = 'cool'
        var sel = window.getSelection()
        var selElem = sel.anchorNode.parentNode
        selElem.parentNode.insertBefore(innerDiv, selElem.nextSibling)

        //set cursor at new position
        sel.collapse(innerDiv.firstChild, innerDiv.textContent.length);
    }
});

JSFiddle no-jQ

于 2016-01-12T21:35:25.173 回答
0

我找到了解决方案。您可以通过其 ID 获取新段落，然后将插入符号设置为该段落中文本的长度：

$(document).on('keypress', 'div[contenteditable="true"]', function(event) {


//enter key
if (event.which == 13) {
    event.preventDefault();
    //insert the paragraph after this element.
    $(window.getSelection().anchorNode.parentNode).after("<p id='newParagraph'>cool</p>");

    //set cursor at new position
    var sel = window.getSelection();
    var innerDiv = document.getElementById('newParagraph');
    var innerDivText = innerDiv.firstChild;

    returnFocus = $("#newParagraph").text().length;
    sel.collapse(innerDivText, returnFocus);
    innerDiv.parentNode.focus();

}

});

http://jsfiddle.net/qcf4d/2/

如果有人有更有效（或 jQuery）的方法，请告诉我。

于 2013-07-08T22:42:01.520 回答