Copy text of a specific tag within multiple tags to clipboard using JavaScript [duplicate]

Question

I want to copy input of a specific tag without having to make an input field to my clipboard using JavaScript

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
– Kingslayer47, Commented Oct 19, 2020 at 7:19
navigator.clipboard.writeText(text) does not use a text area. The clipboard API is the modern approach for interacting with the clipboard. This is described in the accepted answer. — VLAZ
– VLAZ, Commented Oct 19, 2020 at 7:53

Derek Wang · Accepted Answer · 2020-10-19 07:55:14Z

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>

CodeBug · Accepted Answer · 2020-10-19 07:48:43Z

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,

Problem with this is that document.execCommand("Copy"); is now decapitated!

CodeBug · Accepted Answer · 2020-10-19 07:22:40Z

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>

Thanks for the effort, but i don't want it to be a input area that i wanna copy hope you understand
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
What I understand is you want to copy the value inside the variable? am I right? if possible please some actual code.

Collectives™ on Stack Overflow

Copy text of a specific tag within multiple tags to clipboard using JavaScript [duplicate]

3 Answers 3

7 Comments

1 Comment

4 Comments

Linked

Hot Network Questions