Copying Text to Clipboard in HTML & JavaScript - Tutorial For Beginners

It's relatively straightforward to copy text onto the clipboard with JavaScript, all you need to do is first select the text to copy and then, using JavaScript, copy that selection to the clipboard. It's commonly used on input fields.

In this video I take you through an example of copying text to the clipboard with an input field quite easily and also see how it could work on a regular HTML element.

For your reference, check this out:

Follow me on Twitter @dcode!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

[bins.]

This is what i have been looking for a long tine

[withinbracket]

This channel is probably the most underrated channel on the youtube

[GreenBrainX]

The simplicity is out of this world! Thank you

[XodiyevAcademy]

This is work only input may be any <div></div>

[rogeriomartinez]

Great one, thanks!
I am trying to copy the result of multiple input fields.

[Sd-gerk]

Nice and helpful, as a lazt tech support I really need a lazy sheet with copy buttons, thank you.

[benjaminschultz]

Love this. Thank you! Exactly what I needed. Sub button MASHED. 👍

[marimuthur]

Extraordinary thank you so much 👌🏼👌🏼👌🏼👌🏼👌🏼

[keysncoffee]

Thank you for this! Clear and straightforward.

One question: How would I go and predetermine what's IN the box already? So all they'd do is click COPY to grab the text?

[postamble]

I've an a tag with my email adress, and i'd like to copy to clipboard my email adress, how do I do it?

[NICK]

Great, thanks a lot, it's just what I was looking for

[mudandmoss]

The MDN docs say that this is now obsolete. Could you do a quick vid on the alternatives? Cheers

[gabrield]

Great code!
It is possible to copy only the "text" inputs from the form?
Like in the example bellow:

<form>

<input type"text">

<input type"number">

<input type"text">

</form>

I wanted to be able to 'ignore' the number one and copy just the "text" types, is that possible?

[pinochio]

Hey there. How can I copy the text from a <p>text</p>, or <h1>text</h1, or an <span>tex</span>, for exemplo. Could you help me?

[User-dkrx]

i get Uncaught TypeError: myInp.select is not a function
at (code.html:28)
???

[thelittlecustomgiftco]

Can you copy multiple input fields with one copy button?

[justinjenecke]

You cant paste the text anywhere outside the html document itself. What is the point of this code if all i get back is a function

=> {
console.log(detailsText)
})

[maskboy]

if you turn on captions...he says "hey guys hows it going? my name is dumb"
RIP...

[ttvjackriot]

next time, it would be extremely helpful to include the code in the description.

[shahzaib]

good and this code can also be use to copy