Copy to Clipboard using HTML, CSS & JavaScript
ฝัง
- เผยแพร่เมื่อ 22 ก.ย. 2024
- In this video, I will show you how you can copy text to clipboard using HTML, CSS & JavaScript. In this, once your text is copied to clipboard you will get small tooltip which will show copied message for better user experience.
Didn't find what I was looking for, but is was very satisfying to watch how a plain HTML codde gains shape with CSS
Thanks for the tutorial man! I'm newbie this tutorial helped me a lot.
i dunno why my doesnt make image on button. please help me
Add fontawesome 4.7 library link
@@Codingflag thank you sir
This is a very easy way to solve the problem: document.querySelector("button").onclick = function () {
navigator.clipboard.writeText(document.querySelector("input").value);
};
In mine, the command “execComand” is saying that the method is obsolet. Is there other alternative?
I’m using VsCode
Yes. execCommand is deprecated but it will still run on browsers.
Instead of execCommand you can use below line.
navigator.clipboard.writeText(text);
I’ll try it! Thanks for the answer. Very good video, I’m a begginer and it helped me a lot
please explain the concepts
Thanks was really only looking for the "document.execCommand("copy");" but exellent video.
What program are you using to see a live preview and nicely separated HTML,CSS,Java sections?
Its online editor, Codepen.
@@Codingflag awsome thank you!
but you can use a VSCode extension, called Live Server
@@ymo8609 Awesome! Thank you. Codepen is cool but it's a few more extra steps. This small inconvenience tends to hinder me from using it as often as I probably should.
I'll be trying out this new extension out shortly (since I'm currently working on a project).
Thank u so much sir so much love form pakistan ♥️
Waiting for other videos of yours.
Working on it
How can i find this code?
Thx , you helped me
Glad to hear it
please share the code link
How to make multiple copy button in html??
Assign different classes and use same method shown in video
Which code editor are you using
Didn't work. Get "Uncaught TypeError: copyText is null" error message.
Can you share your code on codepen/github so that I can help
Awesome ❤️❤️ 💯
Awesome! Thanks so much!!
Thank You So Much
what if it is used in wordpress?
Doesn't work as usual
thank you so much my friend, it helped me.
Glad it helped
but how to make bulk copy button ?
need help my friend. what about on a web but no element ID on that clipboard, how to copy to clipboard(pasting copied number to clipboard) but what got only
Check how you can uniquely identify that element, check it’s parent has id or not. You can use its parent and then children inside it.
perfect tutorial
awesome
My boss give me 100000+ shipment ids in excel file to enter in a html page which has 100+ employees. I am manually copying every single entry and pasting in the allocate box then press submit button on every single user. Is there any help available for auto copy paste and press button?
yes, check document.execCommand method to copy and paste content.
from codepen code and paste elementor worpdress not working!
Any error on console?
6:00
Всем привет. Пожалуйста помогите разобраться. как соеденить все эти отдельные коды в один html файл и чтобы работал так же корректно??
Put code in blocks like below.
ADD YOUR CSS CODE BLOCK HERE
ADD YOUR HTML CODE BLOCK HERE
ADD YOUR JAVASCRIPT CODE BLOCK HERE
Thanks sir....
Danke!
Can we add in blogger?
yes
Link not working please updae
link of code, please...
How make it double in one HTML?? please help me
please help mee
Source code
Please give the link for the Source Code.
codepen.io/dsr/pen/PoprWgq
@@Codingflag Thankyou
@@Codingflag please keep adding the source code in the video description
very instructive vidéo, it works ! But is there a way so we can see all the value ? My value is too long and we can"t see all of it in the text field.. can you help me ? :)
you can increase width of textfield
@@Codingflag of course ! thanks aha =)
the copy functionality works perfectly, However, the copy button is not displayed as shown in the video, what I got is a solid background in blue
You need to add fontawesome library to get this icon.
ExecCommand is depricated...
😮 really!
Thank you for sharing.
ExecCommeand is not working
Can you share your code so that I can help.
It's execCommand
@@Codingflag yeah its execCommand but it is not working it says 'execCommand' is deprecated
Use below code instead of execCommand.
navigator.clipboard.writeText(text);
that is really cool !!
thank you so much
Glad you like it!
или если кто то может то плиз напишите
Doesn't work as usual
Here is source code, please try and let me know error if it’s not working
codepen.io/dsr/pen/PoprWgq
Thanksss sirrrr for source codeeee loveee form Pakistan ♥️♥️
@@Codingflag Much appreciated!