18

iOS でテキスト選択を終了するイベントはありますか?

次のように選択が変更されたときにイベントを実行できることを知っています。

document.addEventListener("selectionchange", function(event) {
        var text = window.getSelection().toString();
        $(".output").append("<div>" + text + "</div>");
}, false);

<div class="output"></div>

これは選択したテキストで更新.outputされますが、選択が変更されるたびに実行されます。私が望むのは、選択が終了した後にのみテキストをキャプチャすることです。

そのようなイベントはありますか？このようなことは可能ですか？

4

3 に答える 3

6

あなたと同じように、私はこの問題の良い解決策を見つけられなかったので、回避策を作成することにしました。それは最もきれいではありませんが、機能します。

タイムアウト関数を作成し、それを「onselectionchange」イベントにバインドしました。イベントが発生するたびに、タイムアウトが実行されているかどうかを確認し、実行されている場合は削除して新しいものを作成します。

タイムアウトが終了すると、カスタム イベント「selectionEnd」が発生します。

// bind selection change event to my function
document.onselectionchange = userSelectionChanged;

function userSelectionChanged() {

    // wait 500 ms after the last selection change event
    if (selectionEndTimeout) {
        clearTimeout(selectionEndTimeout);
    }

    selectionEndTimeout = setTimeout(function () {
        $(window).trigger('selectionEnd');
    }, 500);
}

$(window).bind('selectionEnd', function () {

    // reset selection timeout
    selectionEndTimeout = null;

    // TODO: Do your cool stuff here........

    // get user selection
    var selectedText = getSelectionText();

    // if the selection is not empty show it :)
    if(selectedText != ''){
       // TODO: Do something with the text
    }
});

デモ: http://jsfiddle.net/dimshik/z8Jge/

私はブログでそれについての小さな投稿を書きました: http://www.dimshik.com/end-of-text-selection-event-on-ios-workaround/

于 2014-04-01T13:18:59.430 に答える
5

私もこの問題に直面しています。これは私の回避策です。ユーザーがモバイル ブラウザのクリップボードで確認/戻るボタンを押して選択を確認する
と、イベントが発生します。selectionEnd

var longpress = false;
var longpressTimer = null;
var loop = null;
var latestSelection = null;

window.ontouchstart = function(){
    longpressTimer = setTimeout(function(){
        longpress = true;
        loop = setInterval(getSelection, 200);
    }, 500)
};

window.ontouchend = function(){
    if(longpressTimer){
        clearTimeout(longpressTimer);
    }
    longpress = false;
}

var getSelection = function (){
    var s = window.getSelection();
    if(s.rangeCount > 0){
        latestSelection = s.getRangeAt(0);
    }else{
        clearInterval(loop);
        var selEndEvent = new CustomEvent("selectionEnd", {"detail": latestSelection});
        window.dispatchEvent(selEndEvent);
    }
}

長押しが実行されると、選択を監視するための間隔が開始されます。次に、ユーザーが選択を確認すると、クリップボードが自動的に削除します。これにより、監視ループが中断され、selectionEnd イベントが送信されます。
最後に選択したテキストの詳細プロパティにアクセスできます。

この問題に関するニュースを受け取り、より良い解決策を得られることを願っています。

于 2015-09-06T16:13:30.407 に答える
5

mouseupイベントをバインドするのはどうですか？

ジャバスクリプト:

document.addEventListener("mouseup", function(event) {
        var text = window.getSelection().toString();
    $(".output").append("<div>" + text + "</div>");
}, false);

デモ: http://jsfiddle.net/dirtyd77/yTMwu/66/

于 2013-02-25T23:02:13.350 に答える