- Forms
- Clipboard
Copy from input
Code
<!-- copy from input -->
<div x-data="form" class="bg-[#f1f2f3] p-5 rounded dark:bg-[#060818]">
<form>
<input type="text" class="form-input" x-model="message1" id="message1" />
<div class="flex flex-wrap gap-2 mt-5">
<button type="button" class="btn btn-primary " data-clipboard-target="#message1">
<svg> ... </svg> Copy from Input
</button>
<button type="button" class="btn btn-dark " data-clipboard-action="cut" data-clipboard-target="#message1">
<svg> ... </svg> Cut from Input
</button>
</div>
</form>
</div>
<!-- script -->
<script>
new ClipboardJS('.btn');
document.addEventListener("alpine:init", () => {
Alpine.data("form", () => ({
message1: 'http://www.admin-dashboard.com',
}));
});
</script>
Copy form Textarea
Code
<!-- copy from textare -->
<div x-data="form" class="bg-[#f1f2f3] p-5 rounded dark:bg-[#060818]">
<form>
<textarea rows="3" wrap="soft" class="form-textarea" x-model="message2" id="message2"></textarea>
<div class="flex flex-wrap gap-2 mt-5">
<button type="button" class="btn btn-primary " data-clipboard-target="#message2">
<svg> ... </svg> Copy from Input
</button>
<button type="button" class="btn btn-dark " data-clipboard-action="cut" data-clipboard-target="#message2">
<svg> ... </svg> Cut from Input
</button>
</div>
</form>
</div>
<!-- script -->
<script>
new ClipboardJS('.btn');
document.addEventListener("alpine:init", () => {
Alpine.data("form", () => ({
message2: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
}));
});
</script>
Copy Text from Paragraph
Code
<!-- copy from paragraph -->
<div class="bg-[#f1f2f3] p-5 rounded dark:bg-[#060818]">
<form>
<p class="mb-3 font-semibold">Here is your OTP <span class="text-2xl" id="copyOTP">22991</span>.</p>
<p class="font-semibold">Please do not share it to anyone</p>
<div class="flex flex-wrap gap-2 mt-5">
<button type="button" class="btn btn-primary" data-clipboard-target="#copyOTP">
<svg> ... </svg> Copy from Paragraph
</button>
</div>
</form>
</div>
Copy Hidden Text (Advanced)
Code
<!-- advanced -->
<div class="bg-[#f1f2f3] p-5 rounded dark:bg-[#060818]">
<form>
<p class="mb-3 font-semibold"> <span> Link -> </span> <span id="copyLink"> http://www.admin-dashboard.com/code</span></p>
<span class="absolute opacity-0" id="copyHiddenCode">2291</span>
<div class="flex flex-wrap gap-2 mt-5">
<button type="button" class="btn btn-primary " data-clipboard-target="#copyLink">
<svg> ... </svg> Copy Link
</button>
<button type="button" class="btn btn-dark " data-clipboard-target="#copyHiddenCode">
<svg> ... </svg> Copy Hidden Code
</button>
</div>
</form>
</div>
© . Vristo All rights reserved.