Программный выбор текста в UIWebView

Я задаю этот вопрос после 2 дней исследований. Я прочитал все связанные вопросы и ответы в stackoverflow и google (включая этот вопрос, который очень похож, но без ответа) и до сих пор не смог найти решение, Надеюсь, кто-то здесь сможет помочь.

У меня есть 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 и без него, чтобы "выключить" в конце функции. Я знаю, что этот код "выбирает" правильный элемент, потому что если я выполню эту команду

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

на самом деле выделяет элемент, на который я нажал, но не вызывает выбор текста. Любые идеи о том, как достичь этого?

Ответ 1

Кажется, это ошибка в Mobile Safari. Когда я переключаю contentEditable на true в touchstart и устанавливаю его в false в touchend, он работает. Если я удалю эти строки и обновить, они все равно будут работать. Если я закрою 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>

Ответ 2

Просто подумайте: убедитесь, что вы не используете что-либо подобное в своем CSS:

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

Это предотвращает выбор текста.

Ответ 3

Я наткнулся на это:

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

Или, ЭТОТ САЙТ Написал некоторые УЖАСНЫЕ скрипты, но это может помочь вам:) Он работает с диапазонами.