js copy function not working in html

Question

I'm trying to get a copy button on my html page but it won't work - in the chrome console it states nothing, it just won't copy the text.

this is my html:

<!doctype html>
<div class="ipDiv tk-saffran">
  <div class="ipText">
    <h2 id="ip">play.MineGlade.net</h2>
  </div>
  <div class="copyButton">
    <button onclick="copyIp()">Copy IP</button>
    <script>
      function copyIp() {
        var copyText = document.getElementById("ip");
        copyText.select;
        document.execCommand("Copy");
      }
    </script>
  </div>
</div>

how do I fix this?

If you use input field instead of h2 tag, then it will work fine. — Ankit Parmar, Jan 05 '18 at 11:50
Do you want to copy "play.MineGlade.net" into your clipboard? — Binara Medawatta, Jan 05 '18 at 11:52
Try var copyText = document.getElementById('ip').innerHTML; document.execCommand('Copy); — simon, Jan 05 '18 at 11:53
Check this link https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard — Binara Medawatta, Jan 05 '18 at 12:03

score 6 · Accepted Answer · answered Jan 05 '18 at 11:53

6

Here is easy and simple way to do copy, Please review this updated code

function copyIp()
{
    window.getSelection().selectAllChildren(document.getElementById("ip"));
    document.execCommand("Copy");
}

<div class="ipDiv tk-saffran">
    <div class="ipText">
        <h2 id="ip">play.MineGlade.net</h2>
    </div>
    <div class="copyButton">
        <button onclick="copyIp()">Copy IP</button>

    </div>
</div>

answered Jan 05 '18 at 11:53

Sanjay Kumar Singh

937
4
9

that's not an IP – Luca Kiebel Jan 05 '18 at 12:27
@Luca it's the server address to my Game Server, in minecraft it's commonly called an IP-address even if it's a domain name with DNS records to point to the actual IP. – MineGlade Jan 05 '18 at 12:33
@SanjayKumarSingh I don't know how to "mark" answers, I'm quite new to stackoverflow – MineGlade Jan 05 '18 at 12:34

score 0 · Answer 2 · answered Jan 05 '18 at 11:53

You are trying to select h2 content which will not work with select function, also you'r not calling it right it should be .select(). To select content of element please check this thread: How to select all text in contenteditable div?

Please see fiddle I made for you with your example

    <div class="ipDiv tk-saffran">
        <div class="ipText">
            <h2 id="ip">play.MineGlade.net</h2>
        </div>
        <div class="copyButton">
            <button onclick="copyIp()">Copy IP</button>
            <script>
                jQuery.fn.selectText = function(){
                   var doc = document;
                   var element = this[0];
                   console.log(this, element);
                   if (doc.body.createTextRange) {
                       var range = document.body.createTextRange();
                       range.moveToElementText(element);
                       range.select();
                   } else if (window.getSelection) {
                       var selection = window.getSelection();        
                       var range = document.createRange();
                       range.selectNodeContents(element);
                       selection.removeAllRanges();
                       selection.addRange(range);
                   }
                };
                function copyIp() {
                   $("#ip").selectText();
                   document.execCommand("Copy");
                }
            </script>
        </div>
    </div>

Make sure your include jquery with this to work.

js copy function not working in html

2 Answers2