Как выбрать текст в мобильном веб-браузере, перемещая сенсорный экран с помощью JavaScript?

Question

Я пытаюсь выбрать текст из мобильного веб-браузера на сенсорном мобильном телефоне, перемещая сенсорный экран с помощью JavaScript. Я не хочу использовать длинное касание для выбора текста. Я пытаюсь получить выделенный текст так же, как браузер на рабочем столе, а не как мобильный телефон.

Когда я пытаюсь выбрать текст, страница прокручивается. Но вместо прокрутки я хочу выделение текста.

Пожалуйста, предоставьте мне способ выделения текста.

Answer 1

Это не вопрос разработки, и его следует перенести в SuperUser. Но чтобы ответить на ваш вопрос, как правило, на мобильных устройствах, вам нужно дважды нажать и вывести панель инструментов выбора текста.

Затем вам нужно будет выбрать диапазон с помощью двух селекторов.

Как вы хотите сделать это с помощью JavaScript? Если вы выбираете диапазон, который не может быть выбран, используйте это:

Если вы можете использовать изображения для нередактируемого текста, вы можете сделать это, используя изображение в качестве фона и работая с ним:

body {font-family: 'Verdana'; font-size: 10pt;}
.editable {background: url('http://i.imgur.com/cAZvApm.png') -1px 1px no-repeat; text-indent: 8.5em; margin: 0 0 10px;}

<div contenteditable class="editable">Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept. Learn more about incognito browsing.</div>

<div>Now try to edit the above text and check out!</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
  if (document.body.createTextRange) {
    var range = document.body.createTextRange();
    range.moveToElementText(document.querySelectorAll(".editable")[0]);
    range.select();
  } else if (window.getSelection) {
    var selection = window.getSelection();        
    var range = document.createRange();
    range.selectNodeContents(document.querySelectorAll(".editable")[0]);
    selection.removeAllRanges();
    selection.addRange(range);
  }
  document.querySelectorAll(".editable")[0].focus();
</script>

Предварительный просмотр:

Примечание: так как это взято из моего ответа, я думаю, это нельзя считать плагиатом!

Answer 2

(Я думаю, что большинство) Мобильные браузеры используют задержку 300 мс, прежде чем щелкнет. Эта задержка здесь, чтобы позволить пользователю дважды нажать, чтобы увеличить, выбрать текст и т. Д.

Если вы хотите устранить эту задержку, вы можете использовать fastclick.js: https://github.com/ftlabs/fastclick

Чтобы выделить текст с помощью JavaScript, вы можете сделать что-то вроде этого:

<span id="foo" >bar</span>

И в вашем сценарии:

 function selectText(element) {
    var doc = document;
    var text = doc.getElementById(element);    

    if (doc.body.createTextRange) { // ms
        var range = doc.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) { // moz, opera, webkit
        var selection = window.getSelection();            
        var range = doc.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

selectText('foo');