How to copy URL on button click?

Question

I am trying to copy the current page URL in the text area on button click. Somehow I have tried but is not working. http://www.w3schools.com/code/tryit.asp?filename=FAF25LWITXR5


    function Copy() 
    {
        var Url = document.createElement("textarea");
        Url.innerHTML = window.location.href;
        Copied = Url.createTextRange();
        Copied.execCommand("Copy");
    }

<div>
 <input type="button" value="Copy Url" onclick="Copy();" />
 <br />
 Paste: <textarea rows="1" cols="30"></textarea>
</div>

What do you mean by "not working"?

Nico Haase
– Nico Haase

2025-06-12 07:10:05 +00:00
Commented Jun 12, 2025 at 7:10 — Nico Haase
– Nico Haase, Commented Jun 12, 2025 at 7:10

Jyothi Babu Araja · Accepted Answer · 2017-04-13 17:18:05Z

18

No need to create new textarea. try to get existing textarea by giving some id ('url').

Here is the working example

function Copy() {
  var Url = document.getElementById("url");
  Url.innerHTML = window.location.href;
  console.log(Url.innerHTML)
  Url.select();
  document.execCommand("copy");
}

<div>
  <input type="button" value="Copy Url" onclick="Copy();" />
  <br /> Paste: <textarea id="url" rows="1" cols="30"></textarea>
</div>

edited Apr 13, 2017 at 17:18

answered Dec 4, 2016 at 12:42

Jyothi Babu Araja

10.3k3 gold badges34 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mr.Web · Accepted Answer · 2022-01-10 20:26:07Z

18

You should not use execCommand anymore, is deprecated, use the Clipboard API:

let url = document.location.href

navigator.clipboard.writeText(url).then(function() {
    console.log('Copied!');
}, function() {
    console.log('Copy error')
});

More on it: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API

answered Jan 10, 2022 at 20:26

Mr.Web

7,2278 gold badges57 silver badges90 bronze badges

Comments

hotcakedev · Accepted Answer · 2020-11-23 06:23:01Z

5

<html>
    <head>
        <title></title>
    </head>
    <script type="text/javascript">
        function Copy() 
            {
                    //var Url = document.createElement("textarea");
                    urlCopied.innerHTML = window.location.href;
                    //Copied = Url.createTextRange();
                    //Copied.execCommand("Copy");
            }
    </script>
    <body>
        <div>
            <input type="button" value="Copy Url" onclick="Copy();" />
            <br />
          
            Paste: <textarea id="urlCopied" rows="1" cols="30"></textarea>
        </div>
    </body>
</html>

edited Nov 23, 2020 at 6:23

hotcakedev

2,5754 gold badges34 silver badges60 bronze badges

answered Dec 4, 2016 at 12:35

Angelo

8248 silver badges22 bronze badges

1 Comment

Angelo Over a year ago

Get the textArea object (from id) and use "innerHtml" istruction for put url in textArea

Pradeep Balasubramaniam · Accepted Answer · 2016-12-04 12:50:58Z

4

Modified your code little bit and it's working.

<html>
  <head>
  <title></title>
</head>
<script type="text/javascript">
        function Copy() 
        {
            var Url = document.getElementById("paste-box");
            Url.value = window.location.href;
            Url.focus();
            Url.select();  
            document.execCommand("Copy");
        }
</script>
<body>
<div>

    <input type="button" value="Copy Url" onclick="Copy();" />
    <br />

    Paste: <textarea id="paste-box" rows="1" cols="30"></textarea>
</div>
</body>
</html>

answered Dec 4, 2016 at 12:50

Pradeep Balasubramaniam

1421 silver badge10 bronze badges

Comments

ehsan_kabiri_33 · Accepted Answer · 2020-11-08 07:23:16Z

4

Another solution, no extra html code is needed:

<script>
    $(document).ready(function () {
        $(document).on("click", "#ShareButton", function (e) {
            $("body").append('<input id="copyURL" type="text" value="" />');
            $("#copyURL").val(window.location.href).select();
            document.execCommand("copy");
            $("#copyURL").remove();            
        });
    });
</script>

answered Nov 8, 2020 at 7:23

ehsan_kabiri_33

4087 silver badges19 bronze badges

Comments

Johnson Doe · Accepted Answer · 2016-12-04 12:39:58Z

2

When the button is clicked select the content of #url then copy it to the clipboard.

<html>
  <body>
    <input type="button" value="Copy Url" id="copy" />
    <br />
    Paste: <textarea rows="1" cols="30" id="url"></textarea>
    <script type="text/javascript">
    document.querySelector("#copy").onclick = function() {
      document.querySelector("#url").select();
      document.execCommand('copy');
    };
    </script>
  </body>
</html>

answered Dec 4, 2016 at 12:39

Johnson Doe

1791 gold badge4 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to copy URL on button click?

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related