merujuk pada tindakan menyalin teks dari sebuah elemen <textarea> di sebuah halaman web atau aplikasi. Ini bisa dilakukan oleh pengguna secara manual (menggunakan pintasan keyboard seperti Ctrl + c) atau secara otomatis melalui fungsi yang dibuat dengan JavaScript. Hasil salinan akan disimpan di clipboard sementara, sehingga bisa ditempelkan di tempat lain.
klik untuk menyalin
👇
<style>
body {
font-family: Arial, sans-serif;
padding: 10px;
background-color: #f8f9fa;
}
.textarea-container {
position: relative;
max-width: 100%;
margin: 20px 0;
padding: 10px;
background: #e9ecef;
border: 1px solid #ddd;
border-radius: 8px;
}
.textarea-container label {
position: absolute;
top: 10px;
left: 10px;
font-size: 14px;
font-weight: bold;
background: #6c757d;
color: #fff;
padding: 2px 8px;
border-radius: 4px;
z-index: 2;
}
.textarea-container button {
position: absolute;
top: 10px;
right: 10px;
font-size: 14px;
padding: 5px 10px;
border: none;
background-color: #007bff;
color: #fff;
border-radius: 4px;
cursor: pointer;
z-index: 2;
transition: background-color 0.3s ease;
}
.textarea-container button:hover {
background-color: #0056b3;
}
.textarea-container .divider {
width: 100%;
height: 2px;
background-color: #6c757d;
margin: 40px 0 10px 0;
}
.textarea-container textarea {
width: 100%;
min-height: 150px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
font-size: 14px;
}
</style>
<div class="textarea-container">
<label for="html-textarea">HTML</label>
<button onclick="copyText('html-code')">Salin</button>
<div class="divider"></div>
<textarea id="html-code">ContohteksHTML</textarea>
</div>
<div class="textarea-container">
<label for="css-textarea">CSS</label>
<button onclick="copyText('css-code')">Salin</button>
<div class="divider"></div>
<textarea id="css-code">ContohteksCSS</textarea>
</div>
<div class="textarea-container">
<label for="js-textarea">JavaScript</label>
<button onclick="copyText('js-code')">Salin</button>
<div class="divider"></div>
<textarea id="js-code">ContohteksJavaScript</textarea>
</div>
<script>
function copyText(id) {
const textarea = document.getElementById(id);
textarea.select();
document.execCommand("copy");
alert(`${id} berhasil disalin`);
}
</script>
atau klik yang ini
👇
Tersalin!
Isi konten 1
Isi konten 2
<style>
.note {
background:#fff9db;border:1px solid #ffd66b;padding:12px;
border-radius:8px;margin-bottom:16px;cursor:pointer;
}
.box {
background:#f0f080;border:1px solid #ffd66b;padding:12px;
border-radius:8px;margin-bottom:16px;cursor:pointer;
}
.example {
background:#cacaca;border:1px solid #ffd66b;padding:12px;
border-radius:8px;margin-bottom:16px;cursor:pointer;
}
/* Efek highlight */
.copy-area.highlight {
animation: flash 0.5s ease;
}
@keyframes flash {
0% { box-shadow:0 0 0px rgba(255,140,0,0.7); }
50% { box-shadow:0 0 12px rgba(255,140,0,0.9); }
100% { box-shadow:0 0 0px rgba(255,140,0,0.7); }
}
/* Toast modern */
.toast {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: #323232;
color: #fff;
padding: 12px 16px;
border-radius: 8px;
opacity: 0;
pointer-events: none;
transition: opacity .3s ease, transform .3s ease;
font-size: 14px;
z-index: 9999;
}
.toast.show {
opacity: 1;
transform: translateX(-50%) translateY(-10px);
}
</style>
<!-- Toast -->
<div id="toast" class="toast">Tersalin!</div>
<div class="note copy-area">Isi konten 1</div>
<div class="box copy-area">Isi konten 2</div>
<div class="example copy-area">Isi konten 3</div>
<script>
function showToast(msg) {
const toast = document.getElementById("toast");
toast.textContent = msg;
toast.classList.add("show");
setTimeout(() => {
toast.classList.remove("show");
}, 2000);
}
document.addEventListener("click", function(e) {
if (e.target.classList.contains("copy-area")) {
const el = e.target;
const text = el.innerText.trim();
// efek highlight
el.classList.add("highlight");
setTimeout(() => el.classList.remove("highlight"), 500);
// copy
navigator.clipboard.writeText(text)
.then(() => {
showToast("Berhasil disalin!");
})
.catch(() => {
const temp = document.createElement("textarea");
temp.value = text;
document.body.appendChild(temp);
temp.select();
try {
document.execCommand("copy");
showToast("Berhasil disalin!");
} catch {
showToast("Gagal menyalin");
}
document.body.removeChild(temp);
});
}
});
</script>
Komentar untuk Kode Script textarea copy