0

エンターキーが押されたときに新しい段落を作成しようとしています。私はそれを行うことができ、うまく機能します。しかし、カーソルが段落の真ん中にあるとしましょう - Enter キーを押すと、カーソル位置から段落の終わりまでの範囲を選択しようとしています。それを既存の段落から削除し、下の新しい段落に追加します。

ここの回答にあるコードを変更しようとしています: Contenteditable - キャレットから要素の終わりまでテキストを抽出します

$(document).on('keydown', 'p[contenteditable="true"]', function(e) {
    if(e.which == 13) { //new paragraph on enter/return
        e.preventDefault();
        var sel = window.getSelection();
    if (sel.rangeCount) {
        var selRange = sel.getRangeAt(0);
        var blockEl = selRange.endContainer.parentNode;
        var range = selRange.cloneRange();
            range.selectNodeContents(blockEl);
            range.setStart(selRange.endContainer, selRange.endOffset);
            remainingText = range.extractContents();
        $(this).after('<p contenteditable = "true">'+ remainingText +'</p>');
        $(this).next('p').focus();

    }

私はあまり成功していません。主に、範囲、ノード、および選択オブジェクトに関する理解が不足しているためです。これらのオブジェクトがどのように機能するか、および上記の答えを私の状況に合わせてどのように適応させることができるかを誰かが説明できますか?

http://jsfiddle.net/UU4Cg/17/

4

3 に答える 3

2

部分文字列バージョン:

$(document).on('keydown', 'p[contenteditable="true"]', function(e) {
    if(e.which == 13) { //new paragraph on enter/return
        e.preventDefault();
        cursorIndex = window.getSelection().getRangeAt(0).startOffset;
        textBefore = $(this).text().substring(0, cursorIndex);
        textAfter = $(this).text().substring(cursorIndex);
        $(this).text(textBefore); 
        $(this).after('<p contenteditable = "true">'+ textAfter +'</p>');
        $(this).next('p').focus();

    }
}
于 2013-04-18T14:39:54.373 に答える