javascript - 矢印キーを使用してコンテンツ編集可能な段落をトラバースする

Question

矢印キーを使用してコンテンツ編集可能な段落間を移動しようとしています。他の編集不可能な要素によって分割される可能性があるため、すべての段落の周りに含む div を配置することはできません。

カーソルが行上にあるときに上矢印キーを押すと、前の段落にジャンプするように、最初の行の文字長を決定できる必要があります。行に対するカーソル位置を維持することを願っています。

次の方法でカーソル インデックスを取得できます。

function cursorIndex() {
    return window.getSelection().getRangeAt(0).startOffset;
}

ここにあるように-Javascript Contenteditable-カーソル/キャレットをインデックスに設定します

var setSelectionRange = function(element, start, end) {
    var rng = document.createRange(),
        sel = getSelection(),
        n, o = 0,
        tw = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, null);
    while (n = tw.nextNode()) {
        o += n.nodeValue.length;
        if (o > start) {
            rng.setStart(n, n.nodeValue.length + start - o);
            start = Infinity;
        }
        if (o >= end) {
            rng.setEnd(n, n.nodeValue.length + end - o);
            break;
        }
    }
    sel.removeAllRanges();
    sel.addRange(rng);
};

var setCaret = function(element, index) {
    setSelectionRange(element, index, index);
};

カーソルが 3 番目の段落の一番上の行にあり、上矢印が押されたとします。2 番目の段落の一番下の行にジャンプしたいと思います。

http://jsfiddle.net/Pd52U/2/