Open Menu dzosoft
Close Menu dzosoft

   TODO SOBRE INFORMÁTICA Y TECNOLOGÍA


                             




BUILD THE MASS IN A FEW MONTHS THAT OTHERS BUILD IN YEARS!

Publish perfectly-optimized content in 1-click



 
 
 

Cómo copiar texto al portapapeles usando html, css y javascript

 
En estos pasos aprenderemos lo que necesitamos para copiar texto al portapapeles usando html, CSS y JavaScript.
 

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

 

Paso 2

 

Javascript

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

 

Paso 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>

Ahora podrías probar el ejemplo.

Download the example

¡Feliz codificación!😇

También te puede interesar


Cómo hacer llamadas Ajax con XMLHTTPRequest

Cómo hacer Drag and Drop en HTML 5 y JavaScript API

Cómo crear una presentación de diapositivas receptiva con CSS y JavaScript

Cómo capturar una foto desde una cámara usando Javascript

Cómo dibujar en el navegador con JavaScript


Leave comment
          

Guardar apodo y correo electrónico en este navegador para la próxima vez.



Cargando...     

Nord VPN