如何通过使用javascript在屏幕上移动触摸来在移动Web浏览器上选择文本？

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>

预览：

注意： 由于这取自我的答案，我想这不能算是抄袭！ < / p>

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');