sample-code/ClickButtonCopyToClipboard.html at master · ngthucdotcom/sample-code · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<!-- Click button copy to clipboard using jQuery -->
<html>
  <head>
    <meta charset="utf-8">
    <title>Click button copy to clipboard using jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
    function copyToClipboard(element) {
        var $temp = $("<input>");
        $("body").append($temp);
        $temp.val($(element).text()).select();
        document.execCommand("copy");
        $temp.remove();
    }
    </script>
    <style media="screen">
      input {
        width: 400px;
        }
    </style>
  </head>
  <body>
    <p id="p1">P1: I am paragraph 1</p>
    <p id="p2">P2: I am a second paragraph</p>
    <input type="text" id="p3" value="This is email for work!">
    <button onclick="copyToClipboard('#p1')">Copy P1</button>
    <button onclick="copyToClipboard('#p2')">Copy P2</button>
    <button onclick="copyToClipboard('#p3')">Copy Input</button>
    <br/><br/><input type="text" placeholder="Paste here for test" />
  </body>
</html>