Open Menu dzosoft
Close Menu dzosoft

   ALL ABOUT COMPUTER SCIENCE AND TECHNOLOGY


                             










 
 
 

How to copy text to clipboard using html, css and javascript

 
In this steps we will learn what we need to copy text to clipboard using html, CSS, and JavaScript.
 

Step 1

 

CSS

 
   *{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: arial,serif;}
	.textToCoy{
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 30px;}
	.textToCoy .textToCoy-box{
	height: auto;
	max-width: auto;
	width: 100%;
	margin: 10px 0;}
	.textToCoy .textToCoy-box {
	font-size: 20px;
	font-weight: 600;
	color: #21e81a;
	margin: 4px;}
	.textToCoy .textToCoy-box textarea{
	height: 100%;
	width: 100%;
	padding: 20px;
	font-size: 14px;
	font-weight: 400;
	outline: none;
	border-radius: 20px;
	background: #EBECE2;}
	.textToCoy-box textarea::-webkit-scrollbar{
	display: none;}
	.textToCoy .textToCoy-box button{
	height: 30px;
	width: 100px;
	color: #fff;
	background: #B33D02;
	outline: none;
	border: none;
	border-radius: 9px;
	font-size: 15px;
	font-weight: 400;
	margin: 8px 0;
	cursor: pointer;
	transition: all 0.4s ease;}
	.textToCoy .textToCoy-box button:hover{
	color:#EAFF21;
	background: #1846DC;}
	@media (max-width: 450px) {
	.textToCoy .textToCoy-box button{
	width: 100%;  
	}}

 

Step 2

 

Javascript

 
function copy()
{
	document.getElementById("idText").select();
	document.execCommand("copy");
	document.getElementById("idCopyButton").innerText = "Copied!"
}

 

Step 3

 

Html

 
<html>
<head>
<style>
   *
   {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: arial,serif;}
	.textToCoy{
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 30px;}
	.textToCoy .textToCoy-box{
	height: auto;
	max-width: auto;
	width: 100%;
	margin: 10px 0;}
	.textToCoy .textToCoy-box {
	font-size: 20px;
	font-weight: 600;
	color: #21e81a;
	margin: 4px;}
	.textToCoy .textToCoy-box textarea{
	height: 100%;
	width: 300px;
	padding: 20px;
	font-size: 14px;
	font-weight: 400;
	outline: none;
	border-radius: 20px;
	background: #EBECE2;}
	.textToCoy-box textarea::-webkit-scrollbar{
	display: none;}
	.textToCoy .textToCoy-box button{
	height: 30px;
	width: 100px;
	color: #fff;
	background: #B33D02;
	outline: none;
	border: none;
	border-radius: 9px;
	font-size: 15px;
	font-weight: 400;
	margin: 8px 0;
	cursor: pointer;
	transition: all 0.4s ease;}
	.textToCoy .textToCoy-box button:hover{
	color:#EAFF21;
	background: #1846DC;}
	@media (max-width: 450px) {
	.textToCoy .textToCoy-box button{
	width: 100%;  }}
</style>
<script>
function copy()
{
	document.getElementById("idText").select();
	document.execCommand("copy");
	document.getElementById("idCopyButton").innerText = "Copied!"
}
</script>
</head>
<body>
<div class="textToCoy">
  <div class="textToCoy-box">
    <textarea id="idText" readonly >
		Learn how to copy text to the clipboard with JavaScript.
		Click on the button to copy the text from the text field.
    </textarea>
    <button id="idCopyButton" onclick="copy();">Copy</button>
  </div>
</div>
</body>
</html>

Now you could test the example

Download the example

Happy Coding! 😇

It might also interest you


How to make Ajax calls with XMLHTTPRequest

How to make Drag and Drop in HTML 5 and JavaScript API

How to create a responsive slideshow with CSS and JavaScript

How to Capture Photo From Camera using Javascript

How to draw in the browser with JavaScript


Leave comment
          

Save nickname and email in this browser for the next time.



Loading...