18

iOS上是否有结束文本选择的事件？

I know I can run an event when the selection changes through the following:

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

绑定一个mouseup事件怎么样？

JAVASCRIPT：

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 回答
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 回答