8

カーソル位置に HTML を挿入するために、範囲の広いJavascript ライブラリと組み合わせて contenteditable div を使用しています。

一日の終わりに、div の内容は通常次のようになります。

<div contenteditable="true">
    "Hello "
    <button contenteditable="false" data-id="147">@John Smith</button>
    " "
</div>

ユーザーは「@」を押すと提案され、その後、選択するとボタンとして挿入されます (ala Google Plus)。&nbsp;このボタンの後にも挿入します。

バックスペースを押すと（最初に を削除した後）Chrome / Safari / Firefoxでボタンが削除されますが&nbsp;、IE8では削除されません。IE8 では、カーソルはボタンを削除せずに単にジャンプします。IE8 でさらに奇妙なのは&nbsp;、ボタンの隣にカーソルを置き、カーソルをボタンのすぐ隣に置くと、バックスペースのボタンが削除されることです。なので&nbsp;、カーソルの右側に があると嬉しいです。

IE8を動作させるために必要なものを知っている人&nbsp;はいますか?カーソルの右側にある必要なく、バックスペースでボタンを削除しますか? （この奇妙な動作に関する情報も役立つかもしれません）

PS私はIEの他のバージョンをテストしていません

4

2 に答える 2

9

私の提案は、キャレットが編集不可能なノードの後に​​配置されていることを最初に確認し、そうであれば、編集不可能な要素の直後に開始し、キャレット位置で終了する範囲を作成することです。この範囲のテキストが空かどうかを確認します。そうである場合、それはキャレットが編集不可能な要素の直後に配置されていることを意味するため、その場合は要素を削除します。最後に、編集不可だった場所にキャレットを置きます。

ライブデモ: http://jsfiddle.net/timdown/vu3ub/

コード：

document.onkeypress = function(e) {
    e = e || window.event;
    var keyCode = e.which || e.keyCode;
    if (keyCode !== 8) {
        return;
    }

    var sel = rangy.getSelection();
    if (sel.rangeCount === 0) {
        return;
    }

    var selRange = sel.getRangeAt(0);
    if (!selRange.collapsed) {
        return;
    }

    var nonEditable = document.getElementById("nonEditable");
    if (!nonEditable) {
        return;
    }

    // Check the caret is located after the non-editable element
    var range = rangy.createRange();
    range.collapseAfter(nonEditable);

    if (selRange.compareBoundaryPoints(range.START_TO_END, range) == -1) {
        return;
    }

    // Check whether there is any text between the caret and the
    // non-editable element. If not, delete the element and move
    // the caret to where it had been
    range.setEnd(selRange.startContainer, selRange.startOffset);
    if (range.toString() === "") {
        selRange.collapseBefore(nonEditable);
        nonEditable.parentNode.removeChild(nonEditable);
        sel.setSingleRange(selRange);

        // Prevent the default browser behaviour
        return false;
    }
};
于 2012-04-04T23:01:10.447 に答える
1

選択範囲を確認し、startContainerのpreviousSiblingプロパティを使用してボタンを見つける方法の簡単なサンプルを使用してjsfiddleを作成しました： jsfiddle

カーソルをaaaに置くと、ボタンが前の兄弟であることが表示されます。cccに入れると、bbbが表示されます。

したがって、これを使用すると、divのkeydownイベントを処理し、キーがバックスペース+ previousSiblingがボタンであるかどうかを確認し、jQueryで削除できます。

ただし、テキストノードの場合、previousSiblingはnullですが、参考までに。

于 2012-04-03T20:10:46.093 に答える