*{
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%;
}}
|
function copy()
{
document.getElementById("idText").select();
document.execCommand("copy");
document.getElementById("idCopyButton").innerText = "Copied!"
}
|
<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!😇 |
ES 
English - EN 
Français - FR 
