Question

经过2天的研究，我问这个问题。我已经阅读了stackoverflow和google中的所有相关问题和答案（包括this问题，这是非常相似但没有答案），但仍然无法找到解决方案。希望有人能够提供帮助。

我有一个UIWebView，其中加载了一些文字。我想以编程方式选择部分文本，就像用户长按它一样。

我尝试执行此javascript代码作为对点击的回复：

function selectEl(x,y)
{
    document.designMode = "on";
    var el = document.elementFromPoint(x, y);
    var range = document.createRange();
    range.selectNodeContents(el);
    var sel = document.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
    document.designMode = "off";
}

我已尝试过，无需在设计结束时将designMode更改为“off”。我知道这段代码“选择”了正确的元素，因为如果我执行这个命令

document.execCommand("BackColor", false, "#ffffcc");

它实际上突出显示了我单击的元素，但它不会导致选择文本。关于如何实现这一点的任何想法？

Answer 1

这似乎是Mobile Safari中的一个错误。当我在contentEditable中将touchstart切换为true并在touchend中将其设置为false时，它可以正常工作。如果我删除这些行并刷新它仍然工作。如果我关闭Mobile Safari，清除缓存，然后重新打开文档并删除它，它将再次停止工作。

我已经使用工作版更新了下面的代码（虽然我为了简单起见删除了长按）。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

(function() {
    var node,
        range,
        offset,
        clientX,
        clientY;

    document.addEventListener("DOMContentLoaded", function() {
        document.body.addEventListener("touchstart", function(event) {
            var selection = window.getSelection();
            selection.removeAllRanges();

            clientX = event.touches[0].clientX;
            clientY = event.touches[0].clientY;

            range = document.caretRangeFromPoint(clientX, clientY);
            node = range.startContainer;
            offset = range.startOffset;

            document.body.contentEditable = "true";
            event.preventDefault();
        });
        document.body.addEventListener("touchmove", function(event) {
            var selection = window.getSelection(),
                range = document.caretRangeFromPoint(event.touches[0].clientX, event.touches[0].clientY),
                newRange = document.createRange();

            if(clientY < event.touches[0].clientY) {
                newRange.setStart(node, offset);
                newRange.setEnd(range.startContainer, range.startOffset);
            }
            else {
                newRange.setStart(range.startContainer, range.startOffset);
                newRange.setEnd(node, offset);
            }

            selection.removeAllRanges();
            selection.addRange(newRange);

            event.preventDefault();
        });
        document.body.addEventListener("touchend", function(event) {
            document.body.contentEditable = "false";
            event.preventDefault();
        });
    });
})();
</script>
<body>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus volutpat mauris sed porta. Phasellus euismod malesuada eleifend. Donec mattis, orci quis scelerisque mattis, turpis sem pulvinar nisi, et sagittis nunc nisi sed nulla. Pellentesque pharetra consequat neque, ultrices mattis mauris auctor id. Aenean tincidunt turpis non odio gravida semper. Praesent feugiat, lorem at lacinia tristique, orci eros tincidunt leo, at adipiscing sapien felis at tellus. Phasellus ac est nec nibh posuere euismod vel vitae neque. Vestibulum mollis adipiscing urna ut tristique. Vivamus purus tortor, venenatis id aliquam nec, elementum et lacus. Praesent elementum purus eget sapien ornare laoreet. Vestibulum ac odio enim.
</body>
</head>
</html>

Answer 2

只是想一想：确保你没有在你的css中使用这样的东西：

* {
  -webkit-touch-callout: none;
   -webkit-user-select: none;
   user-select: none;
}

这可以防止任何文本选择。

Answer 3

我遇到了这个：

hitElem.style.backgroundColor = "highlight";
hitElem.style.color = "highlighttext";

或者， THIS SITE编写了一些可怕的脚本，但它可以帮助你:)它适用于范围。

以编程方式在UIWebView中选择文本

3 个答案: