web-dev-qa-db-ja.com

jquery contenteditable divでのカーソル位置の設定

質問の古いバージョンは以下のとおりです。さらに調査した後、質問を言い換えることにしました。以前の問題は、テキストをハイライトせずにコンテンツ編集可能なdivにフォーカスする必要があることです。Chromeでテキストをまっすぐフォーカスしてハイライトします。

テキストエリアのキャレット位置をリセットすることで、テキストエリアのこの問題を解決したことを実感しています。 contenteditable要素を使用してこれを行うにはどうすればよいですか？私が試したすべてのプラグインは、テキストエリアでのみ動作します。ありがとう。

質問の古いフレーズ：

フォーカスしたいコンテンツ編集可能な要素がありますが、すべてを選択するのではなく、要素の前面にカーソルを置く場合に限ります。

elem.trigger('focus'); with jqueryは、chromeの要素全体のすべてのテキストを選択します。 Firefoxは正しく動作し、テキストの前にキャレットを設定します。どうすればChromeを取得して希望どおりに動作させることができますか。

皆さんありがとう。

jqueryfocuscontenteditablecaretcursor-position
35
Mark

demo： http://so.lucafilosofi.com/jquery-setting-cursor-position-in-contenteditable-div/ =

      <div id="editable" contentEditable="true">
            <h2>Lorem</h2> <p>ipsum dolor <i>sit</i> 
               amet, consectetur <strong>adipiscing</strong> elit.</p> Aenean.
        </div>

    <script type="text/javascript">
        $(function () {
            $('[contentEditable="true"]').on('click', function (e) {
                if (!$(this).hasClass('editing')) {
                    var html = $(this).html();
                    if (html.length) {
                        var range = rangy.createRange();
                        $(this).toggleClass('editing').html('<span class="content-editable-wrapper">' + html + '</span>');
                        var $last = $(this).find('.content-editable-wrapper');
                        range.setStartAfter($last[0]);
                        range.collapse(false);
                        rangy.getSelection().setSingleRange(range);
                    }
                }
            }).on('blur', function () {
                $(this).toggleClass('editing').find('.content-editable-wrapper').children().last().unwrap();
            });
        });
    </script>
20
Luca Filosofi

たぶん私は質問を誤解しているかもしれませんが、次のことはしません（編集可能な<div> id "editable"）？ Chromeでは、要素全体を選択するネイティブブラウザーの動作がfocusイベントの後にトリガーされるように見えるため、タイマーがあります。これにより、フォーカスイベントの後まで延期しない限り、選択コードの効果がオーバーライドされます。

var div = document.getElementById("editable");

div.onfocus = function() {
    window.setTimeout(function() {
        var sel, range;
        if (window.getSelection && document.createRange) {
            range = document.createRange();
            range.selectNodeContents(div);
            range.collapse(true);
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.body.createTextRange) {
            range = document.body.createTextRange();
            range.moveToElementText(div);
            range.collapse(true);
            range.select();
        }
    }, 1);
};

div.focus();
29
Tim Down

はい、それはあなたが使ったから起こります

elem.trigger('focus');

クラスを使用するか、トリガーイベントを発生させたい要素を特定してください。

3
Chirag

DOMを少し突っ込んだ後、なんとかその問題を解決できました。

Elm.focus();
window.getSelection().setPosition(0);

おそらくWebKitブラウザでのみ機能しますが、問題の唯一の原因であるため、条件を追加しました（jQueryを使用）

if(!$.browser.webkit) {
    Elm.focus();
} else {
    Elm.focus();
    window.getSelection().setPosition(0);
}

これで問題が解決することを願っています。

1
DfKimera

Preまたはdivタグにポインターの位置を設定します。

function setCursor(pos) {
    var el = document.getElementById("asd");
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(el.childNodes[0], pos);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    el.focus();
}

$('button').click(function () {
    setCursor(5);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="asd" contenteditable="true" >
asd
two
</div>
<button>Set caret position</button>

ソース： https://social.msdn.Microsoft.com/Forums/en-US/f91341cb-48b3-424b-9504-f2f569f4860f/getset-caretcursor-position-in-a-contenteditable-div?forum= winappswithhtml5

0
K. Kuksin