JavaScript - Copy Text to Clipboard Tutorial
ฝัง
- เผยแพร่เมื่อ 22 ก.ย. 2024
- In this tutorial, I will show you how to use the execCommand function to copy text to the clipboard by a button click.
This can provide good user experience when wanting to provide users information to paste or share with others.
I hope you enjoy this tutorial.
Please like & subscribe!
![[Full] 4 ต่อ 4 Celebrity EP.910 | 22 ก.ย. 67 | one31](http://i.ytimg.com/vi/4TR3MVpOiw8/mqdefault.jpg)
Thankyou brother I love you I can't express my happiness in this small comment section, you solved my problem in 7 min I searched here and there for total 1 hour, you are amazing bro you are amazing
I really appreciate your comment! Thank you for your kind words and I'm glad it helped you :)
Most tutorial available show how to copy text from an input field only. Yours is great because text can be copied from p.
Great tutorial. Well done!
Thank you so much! That's exactly why I made this tutorial!
@@NsquaredCoding thank you very much.
Wow this is exactly what i need . Thank you. I hope your channel grows faster.♥
I'm happy to hear that it was exactly what you needed. Thank you so much for your positive words! I'm hoping it grows faster as well!
Didn't work for me until I realized I was removing child before doing the copy! Great video and thank you for explaining this.
Glad you got it to work! You're very welcome!
Excellent and straight to the point. Thank you.
Thank you for this tutorial!
This really helped me find a solution to copy text inside an element. I was having a difficult time with urls inside a table. I could not use it inside a . So I had to place a inside the . I would have preferred to have the items inline. Nevertheless, it works in a single record. How can I use the same technique with a repeat region?
Thank you so much!!! I have been trying to solve this for an hour.
You're welcome!
I was so happy when it worked...thanks for all the info
document.execCommand('copy') - deprecated 👎
Thank you so much! This is exactly what I needed.
You're welcome!
Nice Video, + answer for Krishan Kumar
console.log('Copied to clipboard: ' +elementText);
alert('Copied to clipboard & Console ' );
thank youu
Thank you so much brother ❤
You’re welcome!
Thanks a lot!
You're welcome!
Thanks 😊😊
Thanks! Very good! :)
You're welcome!
can you show how to move text in clipboard
Easy to follow video, nicely done. How about if I want to type the text to be copied?
If you want it to be copied after you type then you may have to look into using an event handler.
I would using on change but maybe look into onblur so that it will get copied after you lose focus on the input element.
hey it's been said by many that execCommand won't work in the near future is it true
developer.mozilla says it please checkout should I use it or not?
Yeah I completely understand. Look into using the clipboard API. That is the new way to do the same thing. However it is not compatible with IE11.
If you don't care about that then that is the best approach :)
If browsers stopped supporting execCommand I can only imagine how websites would have to update their code!
@@NsquaredCoding can you make video on clipboard api
And can I use execCommand without any issue.
Yes I can make a video on the clipboard API! Thanks for the feedback. As far I know execCommand is cross browser compatible but I'm a windows user so I can't confirm on safari.
th-cam.com/video/O269ctk5b5k/w-d-xo.html
Here's the video using the clipboard API to do the same thing if you're interested!
when i use input all the copy content came in one line ? how to fix it ?
Yes that would be the expected behavior if you paste the text to be in one line If I understand you correctly. What is your use case?
Hi there, how can I copy more then 1 input text to the clipboard? I have 6 inputs and I want to copy the value + label of each one
This is an interesting problem.
When you copy all the inputs and let's the user goes to paste it, will it be easily understandable? Or do you need to format that text before copying the value and label?
@@NsquaredCoding HI there, no need format, just the text in each input.. I have a form that only have numbers, the label indicates the meaning of each number...
Thank youuu
You're very welcome!
Hey! What if I only need to copy the text and not to show the copied text on an input?
I don't know how to solve this :C
So you just want the user to be able to copy text by clicking a button but not show the text they are copying?
@@NsquaredCoding yes ;(
@@NsquaredCoding I mean, i don't want to show the new input
Yeah that's definitely doable. Just show the button and I think you can just hardcore the string that you want copied.
nice video sir..but how can we show some message just like *copied* after clicking on button?
it would be great if you could have added this functionality.
One way you can show that message is in a toast. I created a tutorial on how to create a toast message. I think that would be a great use case in this scenario.
th-cam.com/video/GP2VK3o-TGs/w-d-xo.html
@@NsquaredCoding can I implement it in a page of wordpress website
i am getting message on middle of the screen i want it in bottom how can i do that
snipboard.io/DWlGod.jpg
see the screen shot
You need to use position absolute property here to position at the bottom of the screen.
Im 13 and i love coding, but i hate my sleeping rhytem, its 2:44 my time, so freak you sleep lmao
Also ty for the great video
Haha! Keep leveling up, you're gonna become an expert.
bro when i creat textarea instead of input it doesnot work why ??
when i use input all the copy content came in one line ? how to fix it ?
Textarea will behave differently than input I believe. I created another video with copy using a different technique. It is fairly recent. Please check that to see if that helps!
♥
Not working on safari
I'll look into it today and get back to you!
I'm primarily a windows user so I am not able to test on safari easily haha.
Just did a quick search to confirm that execCommand is usable with Safari so it must be something else!
too complex
Any ideas on how to make it simpler?