Bootstrap input copy to clipboard example
June 28, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
To copy text form input after click on copy text button, you have to use navigator.clipboard.writeText(); method. It will copy text form your input and save your input.
Today, I am going to show you. how to create input copy to clipboard in bootstrap with code example.
Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.
Table of contents
- Includes bootstrap view
- Includes bootstrap library
- Define its class name
- Included JS bootstrap
- Add JavaScript in
<script>tag
This article will guide you to adding input copy to clipboard in Bootstrap with example.
Step 1: Includes bootstrap view
To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Step 2: Includes bootstrap library
First of all, load the Bootstrap framework CSS into the head tag of your webpage.
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">Step 3: Define its class name
After that, create the input fields with a class name type="text".
<input type="text" id="myInput">
<button onclick="myFunction()" class="btn btn-danger">Copy text</button>Step 4: Included JS bootstrap
Now, load the Bootstrap JavaScript file before closing the body tag and done.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>Step 5: Add JavaScript in <script> tag
Add the following JavaScript in <script> tag after the <body> tag to specify click on copy text button copied the clipboard.
function myFunction() {
/* Get the text field */
var copyText = document.getElementById("myInput");
/* Select the text field */
copyText.select();
copyText.setSelectionRange(0, 99999); /* For mobile devices */
/* Copy the text inside the text field */
navigator.clipboard.writeText(copyText.value);
/* Alert the copied text */
alert("Copied the text: " + copyText.value);
}Example.
Let’s look at the following example to understand how it basically works:
input-clipboard-in-bootstrap.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Clipboard example</title>
</head>
<body>
<h1>Bootstrap Input Copy To Clipboard example
</h1>
<input type="text" id="myInput">
<button onclick="myFunction()" class="btn btn-danger">Copy text</button>
<script>
function myFunction() {
/* Get the text field */
var copyText = document.getElementById("myInput");
/* Select the text field */
copyText.select();
copyText.setSelectionRange(0, 99999); /* For mobile devices */
/* Copy the text inside the text field */
navigator.clipboard.writeText(copyText.value);
/* Alert the copied text */
alert("Copied the text: " + copyText.value);
}
</script>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>Check the output of the above code example.
All the best 👍
