Select and copy text to clipboard on double click jQuery

Question

I'm trying to use jQuery to select and copy the text inside the h2 element when i double click the h2 element. (this is with no jQuery involved at all, just the default selecting in browers)

The issue i'm running into is that when i double click it selects less then what i want it to select. when i click 3 times it just selects the whole page.

This is my first post so I don't really know what code I should provide. And I don't have any jQuery written for this yet.

html:

<body>
  <h1>Owl PvP</h1>
  <h2>play.owlpvp.net</h2> <!--This is the part i want to be selected-->
  <figure>
    <img id="mute" src="images/audio-off.svg">
  </figure>

  <nav>
    <ul>
      <li><a href="http://webshop.owlpvp.net">shop</a>
      </li>
      <li><a href="http://forums.owlpvp.net">forums</a>
      </li>
      <li><a href="/staff">staff</a>
      </li>
      <li><a href="#serverstatus">Server</a>
      </li>
    </ul>
  </nav>
  <div id="overlay">
  </div>
</body>

This is what happens when click 3 times, it just selects "owlpvp" when i double click.

website where I want it to work on

"And I don't have any jQuery written for this yet." Thats my questions isn't it? On how to do the jQuery. — DarkEyeDragon, Dec 08 '15 at 15:00
Because I can't find it. I haven't found anything that lets you only select text inside one tag and copy that text to your clipboard. If you find anything feel free to post it. — DarkEyeDragon, Dec 08 '15 at 15:10
You can't copy text with js usually, the user has to either allow it in their browser settings, or manually do it — Jacob Gray, Dec 08 '15 at 15:15
We are not here to code for you. We will help you spot your own mistakes in your own code. So, where is your code? — tao, Dec 08 '15 at 15:19
How about just selecting it? Like, highlight the text in the h2 element so they can do ctrl+c (cmd+c) to copy the text easier? — DarkEyeDragon, Dec 08 '15 at 15:20

score 0 · Accepted Answer · answered Dec 08 '15 at 15:23

0

function selectElementContents(el) {
    if (window.getSelection && document.createRange) {
        var sel = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(el);
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (document.selection && document.body.createTextRange) {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.select();
    }
}

<h1 onclick="selectElementContents(this)">Owl PvP</h1>
<h2 onclick="selectElementContents(this)">play.owlpvp.net</h2>

answered Dec 08 '15 at 15:23

Mosh Feu

24,625
12
74
111

Thank you! Exactly what i was looking for :D -Sorry for the messy question. – DarkEyeDragon Dec 08 '15 at 15:28
1

My pleasure. Everything is OK.. Continue to use StackOverflow and you will be better ;) – Mosh Feu Dec 08 '15 at 15:30

Select and copy text to clipboard on double click jQuery

1 Answers1