Contact us...Newsletter
dzosoft.com - How to do it ?
dzosoft- order by asc dzosoft- order by desc

 
 
 

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.

Get up to 30% off all new products with GoDaddy!

 

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

Risparmia sul tuo hotel - hotelscombined.com

dzosoft
WavePad
Car Rental Deals in Paris
Reviews of dzosoft.com   Copyright © 2022  -  dzosoft.com  All rights reserved.  
dzosoft- How to do it ?
What they are cookies
Like most websites, we use data file small
dimensions that are saved on your computer, tablet, mobile phone or other device
Mobile (collectively referred to as 'device') to record certain data whenever
login or interact with our sites, services, apps, messaging systems
and strumenti.I names and specific types of cookies used can change over time.
To help you better understand the rules and \ 'use of such technology, the following are
some terms and their definitions:
Cookies: small text files (usually formed by letters and numbers) that are saved
in memory of the browser or the device when you visit a website or display a message.
Cookies enable a website to recognize a particular device or browser. There
different types of cookies:
Session cookies expire at the end of the browser session and allow us to
connect your actions during that specific session.
Persistent cookies are instead stored in your device even after the end
the browser session and let you remember your preferences or actions at multiple sites.
First-party cookies are set by the site you're visiting.
The third-party cookies are set by a third party site than the site you are visiting.
Cookies can be disabled or removed using the tools available in most
browsers. The cookie preferences must be set separately
for each browser used, because each offers features and specific options.
dzosoft.com - How to do it ?
Licenza Creative Commons
How to do it ?    - download & install software     is licensed under license Creative Commons Attribution - Non-commercial - Share alike 4.0 International.