Copy text of tag to clipboard using JavaScript

Question

I want to copy input to my clipboard using javascript so is there any way I can do,Thanks

WITHOUT MAKING AN INPUT FIELD

JavaScript And HTML

function copy(input){
  
}

<p>Text To Copy = hi <button type="button" onclick="copy('hi')">click to copy</button></p>

No, cause I don't want to create a textarea and all solutions there are by creating a textarea "I Think" — Kingslayer47, Oct 19 '20 at 07:19
`navigator.clipboard.writeText(text)` does not use a text area. The [clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) is the modern approach for interacting with the clipboard. This is described in the accepted answer. — VLAZ, Oct 19 '20 at 07:53

Derek Wang · Answer 1 · 2020-10-19T07:55:14.263

2

You can use navigator.clipboard.writeText to copy the text to clipboard.

function copy(input) {
  if (navigator.clipboard) {
    navigator.clipboard.writeText(input).then(() => {
      console.log('Copied to clipboard successfully.');
    }, (err) => {
      console.log('Failed to copy the text to clipboard.', err);
    });
  } else if (window.clipboardData) {
    window.clipboardData.setData("Text", input);
  }
}

<p>Text To Copy = hi <button type="button" onclick="copy('hi')">click to copy</button></p>

edited Oct 19 '20 at 07:55

answered Oct 19 '20 at 07:17

Derek Wang

9,675
4
14
36

it seems your code not working – CodeBug Oct 19 '20 at 07:18
On which browser are you testing? @CodeBug – Derek Wang Oct 19 '20 at 07:20
chrome Version 84.0.4147.125 (Official Build) (64-bit) – CodeBug Oct 19 '20 at 07:21
Then it should work!!! – Derek Wang Oct 19 '20 at 07:23
nope, it's not working tried with incognito too. – CodeBug Oct 19 '20 at 07:30
ya it's not working bro – Kingslayer47 Oct 19 '20 at 07:31

score 2 · Answer 2 · edited Oct 19 '20 at 07:22

2

Please try this. Maybe it will work for you.

 function myFunction() {
      /* Get the text field */
      var copyText = document.getElementById("myInput");
    
      /* Select the text field */
      copyText.select();
      copyText.setSelectionRange(0, 99999); /*For mobile devices*/
    
      /* Copy the text inside the text field */
      document.execCommand("copy");
    
      /* Alert the copied text */
      alert("Copied the text: " + copyText.value);
    }

 <input type="text" value="Hello World" id="myInput">
    <button onclick="myFunction()">Copy text</button>

edited Oct 19 '20 at 07:22

CodeBug

1,156
1
5
18

answered Oct 19 '20 at 07:17

Rishi Purwar

956
2
7
13

Thanks for the effort, but i don't want it to be a input area that i wanna copy hope you understand – Kingslayer47 Oct 19 '20 at 07:33
What you actually want to achieve? please ellaborate – Rishi Purwar Oct 19 '20 at 07:36
See I have a flask back-end so i pass a var into code that i don't want to get edited So I want to copy that variable to clipboard without making any changes to it, here you can change the text – Kingslayer47 Oct 19 '20 at 07:38
What I understand is you want to copy the value inside the variable? am I right? if possible please some actual code. – Rishi Purwar Oct 19 '20 at 07:42

score 1 · Accepted Answer · answered Oct 19 '20 at 07:48

function copy_text_fun() {
    //getting text from P tag
    var copyText = document.getElementById("copy_txt");  
    // creating textarea of html
    var input = document.createElement("textarea");
    //adding p tag text to textarea 
    input.value = copyText.textContent;
    document.body.appendChild(input);
    input.select();
    document.execCommand("Copy");
    // removing textarea after copy
    input.remove();
    alert(input.value);
}

<p id="copy_txt">hi</p>
<button  onclick="copy_text_fun()">Copy</button>

here is with the paragraph tag,

Copy text of tag to clipboard using JavaScript

3 Answers3