Question

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

我知道当选择通过以下方式改变时我可以运行一个事件：

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

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

这将使用所选文本更新.output，但每次选择更改时都会运行。我想要的是仅在选择完成后捕获文本。

有没有这样的事件？有可能做这样的事吗？

Answer 1

与您类似，我没有找到解决此问题的好方法，所以我决定创建一个解决方法。它不是最漂亮但却有效。

我创建了一个超时函数并将其绑定到“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
    }
});

DEMO：http://jsfiddle.net/dimshik/z8Jge/

我在博客中写了一篇关于它的小帖子：http://www.dimshik.com/end-of-text-selection-event-on-ios-workaround/

Answer 2

我也面临这个问题，因为我还没有找到一个好的解决方案，这是我的解决方法。
当用户在移动浏览器剪贴板中按确认/返回按钮确认其选择时，它将触发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事件您可以在详细信息属性中访问最后选择的文本。

我希望得到一些关于这个问题的消息并获得更好的解决方案。

Answer 3

如何绑定mouseup事件？

JAVASCRIPT：

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

样本： http://jsfiddle.net/dirtyd77/yTMwu/66/

文本选择结束事件？

3 个答案: