1function copy() {
2 var copyText = document.querySelector("#input");
3 copyText.select();
4 document.execCommand("copy");
5}
6
7document.querySelector("#copy").addEventListener("click", copy);
1// Since Async Clipboard API is not supported for all browser!
2function copyTextToClipboard(text) {
3 var textArea = document.createElement("textarea");
4 textArea.value = text
5 document.body.appendChild(textArea);
6 textArea.focus();
7 textArea.select();
8
9 try {
10 var successful = document.execCommand('copy');
11 var msg = successful ? 'successful' : 'unsuccessful';
12 console.log('Copying text command was ' + msg);
13 } catch (err) {
14 console.log('Oops, unable to copy');
15 }
16
17 document.body.removeChild(textArea);
18}
1// Copies the image as a blob to the clipboard (PNG only)
2navigator.clipboard.write([
3 new ClipboardItem({
4 [blob.type]: blob,
5 }),
6])
1$(document).ready(function(){
2 $("#ewefmwefmp").click(function(){
3 //alert()
4 var copyText = document.getElementById("myInput");
5 copyText.select();
6 copyText.setSelectionRange(0, 99999)
7 document.execCommand("copy");
8 alert("Copied the text: " + copyText.value);
9
10 });
11});
1<!DOCTYPE html>
2<html>
3<head>
4<meta name="viewport" content="width=device-width, initial-scale=1">
5<style>
6.tooltip {
7 position: relative;
8 display: inline-block;
9}
10
11.tooltip .tooltiptext {
12 visibility: hidden;
13 width: 140px;
14 background-color: #555;
15 color: #fff;
16 text-align: center;
17 border-radius: 6px;
18 padding: 5px;
19 position: absolute;
20 z-index: 1;
21 bottom: 150%;
22 left: 50%;
23 margin-left: -75px;
24 opacity: 0;
25 transition: opacity 0.3s;
26}
27
28.tooltip .tooltiptext::after {
29 content: "";
30 position: absolute;
31 top: 100%;
32 left: 50%;
33 margin-left: -5px;
34 border-width: 5px;
35 border-style: solid;
36 border-color: #555 transparent transparent transparent;
37}
38
39.tooltip:hover .tooltiptext {
40 visibility: visible;
41 opacity: 1;
42}
43</style>
44</head>
45<body>
46
47<p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>
48
49<input type="text" value="Hello World" id="myInput">
50
51<div class="tooltip">
52<button onclick="myFunction()" onmouseout="outFunc()">
53 <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
54 Copy text
55 </button>
56</div>
57
58<p>The document.execCommand() method is not supported in IE8 and earlier.</p>
59
60<script>
61function myFunction() {
62 var copyText = document.getElementById("myInput");
63 copyText.select();
64 copyText.setSelectionRange(0, 99999);
65 document.execCommand("copy");
66
67 var tooltip = document.getElementById("myTooltip");
68 tooltip.innerHTML = "Copied: " + copyText.value;
69}
70
71function outFunc() {
72 var tooltip = document.getElementById("myTooltip");
73 tooltip.innerHTML = "Copy to clipboard";
74}
75</script>
76
77</body>
78</html>
79