TOUT SUR L'INFORMATIQUE ET LA TECHNOLOGIE

TRAIN INTENSELY LIKE NEVER BEFORE AND PUSH YOUR LIMITS!

Publish perfectly-optimized content in 1-click




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%;  
	}}

   *{
	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!"
}

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>

<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! 😇

Télécharger des logiciels

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

Step 1

CSS

Step 2

Javascript

Step 3

Html