live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Javascript Clipboard API Example to Copy Text to Clipboard in Browser Using HTML5
Jan 9, 2025
Buy the full source code of application here:
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will actually talk about
0:05
the JavaScript clipboard API which is
0:09
available to every browser Chrome
0:11
Firefox Safari Internet Explorer so it's
0:14
a buil-in API for browsers for
0:16
applications to actually copy the data
0:19
to clipboard
0:21
so so we have this example right here so
0:25
this is actually a paragraph which is
0:26
written so if I click this button of
0:29
copy paragraph so what it will do it
0:31
will actually show me this copy to
0:33
clipboard message that the paragraph is
0:35
successfully copied so now I can paste
0:38
this paragraph right here you can see
0:40
that the paragraph has been copied to
0:41
clipboard and we simply pasted it so now
0:45
if you if you write something right here
0:48
in this input
0:50
feed so if you want to copy this
0:55
data we click this button copy input
0:58
value so now this notification happens
1:01
copied to clipboard so now this data is
1:03
successfully copied so now we can
1:06
directly go to anywhere and paste this
1:08
you will see that so this is actually
1:11
the copy to clipboard operation and we
1:13
will be looking at step by step how to
1:15
implement this inside the browser using
1:17
simple example in HTML and JavaScript
1:20
you can even copy custom text as well so
1:22
if you click copy Customs text so now
1:25
this is successfully copied you'll see
1:28
and copy with tool tip tool tip
1:30
basically it's a notification message
1:32
that you're seeing right here as I click
1:34
it this message SS so this is all so now
1:39
let's get started and we are actually
1:41
using Tailwind CSS for styling this so
1:43
let's get start so what I will do I will
1:47
delete everything so the source code is
1:50
given in the description you can check
1:52
out the source
1:54
code so I just included the Tailwind CSS
1:58
CDN right here if you see that
2:00
and we have applied this BG gray 100
2:03
which is a background color if you make
2:05
you can even change to red as
2:09
well so this is just the tail bin
2:14
classes so after this inside the body
2:17
what we will have a div
2:21
element this is not necessary for this
2:24
application I just want to make this
2:26
interface first of all
2:34
so right inside this we will actually
2:37
have a simple div inside this uh we will
2:42
actually be having a simple
2:47
paragraph which will have an ID of
2:50
paragraph you can see we have given an
2:53
ID to this paragraph So This is a simple
2:57
paragraph you can have any text right
3:06
here so if you just refresh you will see
3:10
the paragraph is written right in the
3:12
center of the screen so now we will
3:14
allow the
3:16
user we will have a simple button to
3:20
actually copy the text to clipboard so
3:23
we will have a button right here which
3:24
will simply say copy paragraph So what
3:28
this button will do it will actually
3:30
have an ID right here we will simply say
3:34
copy so now in the JavaScript if you
3:37
want to initialize
3:40
your the JavaScript clipboard API in
3:44
order to use this uh implement this copy
3:46
to clipboard operation it's very easy
3:49
first of all you uh need to get the
3:52
reference of the
3:53
button so we have given the button an ID
3:57
so you can simply say copy we have given
4:00
this ID if you see we are just getting
4:03
the reference of
4:06
it and after getting the reference we
4:08
can simply bind a event handler to this
4:11
so when we click this copy
4:14
button we will actually have a call back
4:18
function which will run so let me just
4:21
say
4:23
alert just to cross check if it is
4:25
working so we have this button if I
4:28
click it you will see High Vol is
4:30
putting let me just attach some classes
4:33
of Tailwind which is
4:37
uh to this button so
4:41
BG red 500
4:59
so these are all the classes you need to
5:04
attach these are all Tailwind classes
5:06
guys so you don't need to worry about
5:09
Tailwind it is not about Tailwind so we
5:12
have this button right here it is
5:13
rounded so when we click this button uh
5:16
instead of high World message we need to
5:18
copy the paragraph text to clipboard so
5:22
now we will actually be calling a
5:25
function simple function copy to
5:29
clipboard
5:36
so write just right here we can make
5:39
this function Asing
5:45
function so inside this function
5:51
uh we will actually be
5:54
getting the data text passed as an
5:57
argument so while we are calling this
5:59
function we need to actually pass
6:02
whatever is the data which is located in
6:05
the paragraph So we have given the
6:08
paragraph element as well an
6:10
ID so paragraph if you see in the HTML
6:14
we have given this ID of paragraph We
6:17
will get all the text content by using
6:20
dot text content and then we will pass
6:23
this to this function so now we are
6:26
getting it as an argument right here and
6:28
uh
6:30
now there is an actually a function we
6:33
can use TR catch block
6:47
here so inside this JavaScript clipboard
6:51
API we have this function await
6:54
Navigator apis have all these apis built
6:57
in inside browser and Navigator do
7:00
clipboard do write text this is actually
7:05
the function which actually allows you
7:07
to copy the any text to clipboard now
7:11
we'll simply pass the text right here so
7:16
if you just write this you can also have
7:18
a console log
7:20
message copied to
7:26
clipboard so if you now run this
7:28
application and and inspect element go
7:31
to console and click this button you
7:33
will actually see this copy to
7:36
clipboard so now this paragraph is
7:39
copied you can now paste this you will
7:42
see so in this way this is a built-in
7:45
functionality which is available in
7:47
every browser you need to no don't need
7:49
to use any third party
7:50
dependency this clipboard API is
7:54
available so now we need to show a small
7:58
little notification such that uh when we
8:02
copy text we need to show that
8:04
notification to the user that the text
8:07
has been successfully copied so for
8:09
doing
8:13
that we will actually be declaring a
8:17
tool
8:19
tip just right here we will
8:23
say tool
8:28
tip document do getet element by ID tool
8:32
tip so right here in the HTML we do need
8:35
to declare a simple
8:39
element just after this button we can do
8:42
a span element right
8:47
here and we can give it an ID to it of
8:50
tool tip and uh this basically by
8:53
default it will be hidden it will not be
8:56
shown and these are different different
8:59
Tailwind classes are there built in
9:02
absolute top
9:05
full
9:08
left 1X
9:12
two
9:15
transform and we are adding some
9:17
animation to it in the X Direction
9:19
whenever it appears it appears in an
9:21
animated way margin top to
9:25
px2 you can even do it in plain
9:28
JavaScript as well but it will take some
9:30
time but uh buil uh Tailwind CSS has
9:33
built-in features which allows you to do
9:36
animations as well and the color of the
9:39
text will be white and it will be small
9:42
text small and it will be rounded and
9:45
the value of this span element will be
9:48
copied you can say copy to
9:52
clipboard so by default if you now
9:55
refresh your application this tool tip
9:57
will not be shown if you refresh nothing
9:59
will be shown so as I click this button
10:02
I need to show this notification to the
10:05
user
10:09
so right here after we get the reference
10:12
of the tool tip we can simply say tool
10:15
tip. class.
10:18
add we will be adding this uh tool
10:25
tip class that we have uh
10:31
sorry we need to remove this class which
10:34
we have added which is the hidden
10:37
class we need to remove this class of
10:40
hidden so now it will be shown and now
10:42
we only need to show it for 2 seconds so
10:44
we'll use the set time mode function
10:47
which is available inside
10:53
JavaScript so this will be a simple
10:57
arrow function and it will on only be
10:59
showing the tool tip for 2 seconds so we
11:03
will again add this hidden
11:05
class put a comma and this is actually
11:08
takes the value in millisecond so 2,000
11:11
millisecond this simply means that the
11:12
tool tip will show for 2 seconds and
11:14
after that it will be hidden so if you
11:16
refresh your application click this
11:20
button uh click board sorry this is not
11:24
showing I think I made some kind of
11:27
mistake in the HTML
11:30
let me add this once again
11:59
let me just copy all this the all the
12:02
source code is given guys in the
12:03
description no no need to worry about it
12:11
so I just need to shift this code right
12:14
here whenever we write this code
12:19
so in this function right
12:23
here so for every copy to clipboard
12:26
operation the notification will show you
12:28
will see copied
12:29
copied copied you can just change this
12:32
notification let's suppose you don't
12:34
want to have copied you can simply
12:38
say copy to
12:41
clipboard you can customize the color
12:44
size everything you will see copy to
12:47
clipboard you can even change the color
12:49
as well so by default it shows in great
12:53
you can change it to Red these are
12:55
Tailwind classes we can customize
12:57
everything you'll see that
12:59
it appears for 2 seconds and it goes
13:02
away and if you click this your
13:05
paragraph is copied you can now paste
13:07
this paragraph if you input any anything
13:10
inside this input field click on this
13:12
copy to clipboard now everything in this
13:14
input field is copied you can paste it
13:17
this is the overall example guys the
13:19
main function to actually Navigator do
13:22
clipboard. WR text this is actual main
13:24
function of the JavaScript clipboard API
13:27
which is essentially built in in every
13:28
browser
13:29
if you need to read more about it you
13:31
can visit the Mozilla website and it
13:34
reads more about it the clipboard API it
13:37
also uh support operations of cut and
13:39
paste as well apart from copy so these
13:43
is the it is compatible with all the
13:45
versions of every browser so thank you
13:48
very much for watching this video and I
13:50
will be seeing you in the next one
#Programming
#Clip Art & Animated GIFs
#Other
#Other