javascript - 如何通过使用 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>

预览:

注意:由于这是摘自我的回答，我想这不能算是抄袭吧!