Add a utility to your UI with Copy Text From Input To Clipboard JavaScript With…. Free Bootstrap 5 code — HTML ready to copy, MIT licensed.
1
2<!DOCTYPE html>
3<html lang="en">
4<head>
5<title>Copy Text From Input To Clipboard Javascript With Bootstrap 5</title>
6<meta charset="utf-8">
7<meta name="viewport" content="width=device-width, initial-scale=1">
8<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
9<style>
10 @import url('https://fonts.googleapis.com/css2?family=Duru+Sans&display=swap');
11 *{
12 font-family: 'Duru Sans', sans-serif;
13 }
14 </style>
15</head>
16<body>
17<section>
18<h3 class="pt-5 text-center pb-4">Copy Text From Input To Clipboard Javascript With Bootstrap 5</h3>
19<div class="container">
20<div class="input-group mb-3">
21<input type="text" class="form-control" id="txt" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2" required>
22<button class="btn btn-secondary" type="button" onclick="if (!window.__cfRLUnblockHandlers) return false; copyTxt()" data-cf-modified-6648bed6c66891ec624adbde-="">Copy Text</button>
23</div>
24<div class="alert alert-warning alert-dismissible fade" role="alert" id="alert">
25<strong id="showText"></strong> This text copied
26<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
27</div>
28</div>
29</section>
30<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
31<script type="6648bed6c66891ec624adbde-text/javascript">
32 function copyTxt() {
33 var text = document.getElementById('txt').select();
34 document.execCommand('copy');
35 var alert = document.getElementById("alert");
36 if (alert.style.display === "block") {
37 alert.style.display = "none";
38 } else {
39 alert.style.display = "block";
40 alert.style.opacity = "1";
41 }
42 }
43 </script>
44</body>
45</html>
Auto move mouse cursor snippet
Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.
Bootstrap 5 Ecommerce Product Detail Page Design snippet
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Bootstrap 5 Ecommerce single product page design template
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
57
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.