javascript copy to clipboard

Solutions on MaxInterview for javascript copy to clipboard by the best coders in the world

showing results for - "javascript copy to clipboard"

13 Feb 2017

1<head><script>
2function copyToCliBoard() {
3  var copyText = document.getElementById("myInput");
4  copyText.select();
5  copyText.setSelectionRange(0, 99999); /* For mobile devices */
6  document.execCommand("copy");
7  alert("Copied the text: " + copyText.value);
8}
9</script></head>
10
11<body>
12<input type="text" value="Hello World" id="myInput">
13<button onclick="copyToCliBoard()">Copy text</button>
14</body>

Neele

23 Jul 2020

1function copyToClipboard(text) {
2  var input = document.body.appendChild(document.createElement("input"));
3  input.value = text;
4  input.focus();
5  input.select();
6  document.execCommand('copy');
7  input.parentNode.removeChild(input);
8}

Helena

11 Apr 2017

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});

Brett

18 Oct 2020

1var copyTextarea = document.getElementById("someTextAreaToCopy");
2copyTextarea.select(); //select the text area
3document.execCommand("copy"); //copy to clipboard

Ewenn

26 Feb 2017

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

Lara

20 Sep 2016

1const copyToClipboard = () => {
2
3  navigator.permissions.query({name: "clipboard-write"}).then(result => {
4    if (result.state == "granted" || result.state == "prompt") {
5      // write to the clipboard now
6      updateClipboard('I copy this string');
7    }
8  });
9};
10
11const updateClipboard = (newClip) => {
12  
13  navigator.clipboard.writeText(newClip).then(() => {
14    // clipboard successfully set
15	console.log('success');
16  }, () => {
17    // clipboard write failed
18    console.log('Failed to copy');
19  });
20};
21
22const btn = document.getElementById('copy-button');
23
24btn.addEventListener('click', copyHashtagToClipboard);
25
26

queries leading to this page