0

contenteditable div にテキストを挿入し、カーソルを挿入したテキストの最後に配置する必要があります。

ここから以下の解決策を得ました コンテンツ編集可能な div のカーソル位置にテキストを挿入します。

テキストが空のdivに追加されている場合、これはうまく機能します。ただし、ユーザーが既にテキストを入力している場合は機能しません。または、この関数を使用してテキストを挿入する場合、ユーザーは新しく挿入されたテキスト内のどこかにカーソルを置き、関数が再度呼び出されます。次に、挿入されたテキストの先頭にカーソルが残ります。

編集: 以下のコードは IE で動作し、カーソルを適切に設定しますが、Chrome では問題があります。

function insertTextAtCursor(text) {
    var sel, range, html;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode( document.createTextNode(text) );
        }
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().text = text;
    }
}
4

1 に答える 1

1

わかりました、それが Chrome/IE のものであることに気付いたら、最初に見つけた回答へのコメントの 1 つに回答が隠されているのを見つけることができました。

function insertTextAtCursor(text) { 
    var sel, range, html; 
    sel = window.getSelection();
    range = sel.getRangeAt(0); 
    range.deleteContents(); 
    var textNode = document.createTextNode(text);
    range.insertNode(textNode);
    range.setStartAfter(textNode);
    sel.removeAllRanges();
    sel.addRange(range);        
}
于 2013-05-17T05:32:36.410 に答える