1

その中に要素を持つ contenteditable div があります。私がやりたいのは、Enterキーが押されたときにキャレットが現在ある要素の直後に新しい段落タグを作成することです。Enterキーを押すと段落タグを作成できますが、キャレットを段落タグのテキストの末尾、閉じの直前に配置したい </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

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 に答える