Select text with javascript and show Android's copy window

Question

I want to click on button and auto select text from an input, then I want android users to see "copy window" to copy selected text.

enter image description here

<button id="toggler">Click me</button>
<input id="copy_me" type="text" value="Stack Overflow" />

<script>
$('#toggler').click(function() {
  $('#copy_me').select();
  // Some code to fire
});
</script>

this dialog is native and automatically appears if you select text (which is selectable) in every TextView, HTML... you just need a long press. or what do you want to achieve within your app, that you need this scenario?! — longi, Mar 31 '14 at 12:32
This is normal webpage and i want easiest way to copy some text (from mobile device). — Vasil Nikolov, Mar 31 '14 at 12:36

score 2 · Answer 1 · edited May 23 '17 at 12:14

2

As mentioned in the comment above, I wouldn't recommend changing the copy-paste function of android/ios.. Usually, users are familiar with their os-copy-paste functions. You just need to ensure that your text is selectable.

However, you could try to copy your text into "clipboard" as described here: How do I copy to the clipboard in JavaScript? , but I've never tried this with mobile devices and don't know if it works

edited May 23 '17 at 12:14

Community

1
1

answered Mar 31 '14 at 12:53

longi

10,071
8
51
86

1

This methods use flash. When I select the text, android users need to re select this text to copy. I want some javascript solution to select text like user and shows "copy bar". – Vasil Nikolov Mar 31 '14 at 13:26
upps, i posted the wrong discussion. i just updated my answer.. hope it helps, if not: i`m out of ideas – longi Mar 31 '14 at 16:35

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

I'm not sure which versions of Android this will work for, but what you should to try to use is the Selection Object. I tried it on 4.3 and it seems to do what you need.

As a note though the page specifies the following warning:

This is an experimental technology.

Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

Unfortunately the compatibility table link mentioned doesn't lead anywhere. Here's a link to the Browser compatibility table for window.selection which unfortunately is not useful as well.

Here's a quick example:

HTML:

<strong>Text to select</strong>
<button onClick="selectText();">Select</button>

Javascript:

function selectText()
{
    //select the element you want
    var strongs = document.getElementsByTagName("strong");
    //get the selection object
    var selection = window.getSelection();

    if (selection.rangeCount > 0)
    {
        //clear current selection
        selection.removeAllRanges();
    }

    for (var i=0;i<strongs.length;i++)
    {
        //loop over the items and add them to the selection object
        var range = document.createRange();
        range.selectNode(strongs[i]);
        selection.addRange(range);
    }
}

I hope that helps.

Thanks for good answer. I tried it with android 4.2.2 but I don't see result. — Vasil Nikolov, Apr 06 '14 at 07:00
I just noticed your question says text from an input, my example was for text in a div. Did you try it with an input or a div? I'll look into doing the same thing with inputs. — Faris, Apr 06 '14 at 07:28

Select text with javascript and show Android's copy window

2 Answers2