Copy Text From Input To Clipboard JavaScript With…

Utilities Bootstrap 5Free

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.

5.3k views34 downloads4 years ago

gosnippets.com/preview/copy-text-from-input-to-clipboard-javascript-with…

Source Code

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>

More Utilities snippets

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.

UtilitiesView →

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.

UtilitiesView →

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.

UtilitiesView →

Comments(0)

No comments yet — be the first to start the discussion.

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>