1

I am trying to select text from mobile web browser on touch based mobile by moving touch on screen using javascript. I don't want to use long touch to select text. I am trying to get selected text just like browser on desktop not like mobile provided way.

When I am trying to select text page is scrolling. But Instead of scrolling I want text selection.

Please provide me way to select text.

user3340927
  • 25
  • 1
  • 5

2 Answers2

2

This is not a development question, and should be migrated to SuperUser. But to answer your question, generally in mobiles, you need to double tap and bring the text selection toolbar.

Then you will need to select the range using the two selectors.

How do you want to do it using JavaScript? If you are selecting a range, that cannot be selected, use this:

If you can use images for the uneditable text, you can do this way by using an image as a background and work on it:

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>

Preview:

Note: Since this is taken from my answer, I guess this cannot be considered plagiarism!

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
1

(I think most) Mobile browsers use a 300ms delay before the click is fired. This delay is here to allow the user to double-tap to zoom, select text, etc.

If you want to remove this delay, you can use fastclick.js: https://github.com/ftlabs/fastclick

To select text using javascript, you can do something like this:

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

And in your script:

 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');
Stef van Wijchen
  • 79
  • 7