Textarea Copy Sederhana
📌 Textarea Copy Sederhana
</>
<textarea id="myText" rows="5" cols="40">
Ini contoh teks yang bisa di-copy otomatis.
</textarea>
<br>
<button onclick="copyText()">Copy</button>
<script>
function copyText() {
var copyTextarea = document.getElementById("myText");
copyTextarea.select();
copyTextarea.setSelectionRange(0, 99999); // mobile support
document.execCommand("copy");
alert("Berhasil di-copy!");
}
</script>
Safelink-aza
Box Copy Modern
📌 Copy Box Modern
</>
<div class="copy-box">
<div class="copy-header">
<span class="icon"></></span>
<button onclick="copyText()" class="copy-btn">Salin</button>
</div>
<div class="copy-content" id="textToCopy">
ISI_KONTEN_BIASA<span class="highlight">ISI_KONTEN_HIGHLIGHT</span>
</div>
</div>
<style>
.copy-box {
max-width: 800px;
margin: 20px auto;
border-radius: 16px;
overflow: hidden;
font-family: monospace;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
/* HEADER */
.copy-header {
background: #b7e4d7; /* warna atas */
padding: 12px 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.icon {
color: #2d6a4f;
font-weight: bold;
}
/* BUTTON */
.copy-btn {
background: #ffffff;
border: 2px solid #95d5b2;
border-radius: 12px;
padding: 6px 14px;
cursor: pointer;
font-weight: bold;
color: #2d6a4f;
transition: 0.3s;
}
.copy-btn:hover {
background: #d8f3dc;
}
/* CONTENT */
.copy-content {
background: #f1fdf9;
padding: 20px;
font-size: 16px;
color: #333;
overflow: auto;
}
/* HIGHLIGHT */
.highlight {
background: #95d5b2;
color: #1b4332;
padding: 2px 6px;
border-radius: 6px;
}
</style>
<script>
function copyText() {
const text = document.getElementById("textToCopy").innerText;
navigator.clipboard.writeText(text);
alert("Berhasil disalin!");
}
</script>
Safelink-aza
Textarea Copy Semi Modern
📌 Semi Modern
</>
<style>
.textarea-container {
position: relative;
max-width: 100%;
margin: 0 auto;
}
.textarea-container label {
position: absolute;
top: 0px;
left: 0px;
font-size: 14px;
font-weight: bold;
background: #fff;
padding: 0 5px;
z-index: 2;
}
.textarea-container button {
position: absolute;
top: 0px;
right: 0px;
font-size: 14px;
padding: 5px 10px;
border: none;
background-color: #007bff;
color: #fff;
border-radius: 4px;
cursor: pointer;
z-index: 2;
}
.textarea-container button:hover {
background-color: #0056b3;
}
.textarea-container textarea {
width: 100%;
min-height: 150px;
padding: 30px 10px 10px 10px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
font-size: 14px;
}
</style>
<div class="textarea-container">
<label for="kode-textarea">jUDUL KODE</label>
<button onclick="copyText()">Salin</button>
<textarea id="kode-textarea">Contoh teks yang dapat disalin.</textarea>
</div>
<script>
function copyText() {
const textarea = document.getElementById("kode-textarea");
textarea.select();
document.execCommand("copy");
alert("Teks berhasil disalin!");
}
</script>
Safelink-aza
Copy Box Pre
📌 Tag Pre Code Copy
</>
<div style="position:relative;max-width:600px;margin:auto;">
<button onclick="copyCode()"
style="position:absolute;top:10px;right:10px;padding:6px 10px;font-size:12px;border:none;border-radius:6px;background:#2196F3;color:#fff;cursor:pointer;">
Copy
</button>
<pre id="codeBox"
style="background:#f4f4f4;padding:15px;border:1px solid #ddd;border-radius:8px;overflow:auto;font-size:14px;line-height:1.5;">
<h1>Contoh Kode HTML</h1>
<p>Ini adalah contoh isi dalam tag pre.</p>
</pre>
</div>
<script>
function copyCode() {
var text = document.getElementById("codeBox").innerText;
navigator.clipboard.writeText(text).then(function() {
alert("Berhasil di-copy!");
});
}
</script>
Safelink-aza
Lihat kode script
✍️:
Posting Komentar