how to make copy to clipboard in javascript

dipesh

copy to clipboard in  javascript 

Hello friends, in this post I will tell you that using java script, you can make the code of 'coppy to clipboard' .



<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

.tooltip {

  position: relative;

  display: inline-block;

}


.tooltip .tooltiptext {

  visibility: hidden;

  width: 140px;

  background-color: #555;

  color: #fff;

  text-align: center;

  border-radius: 6px;

  padding: 5px;

  position: absolute;

  z-index: 1;

  bottom: 150%;

  left: 50%;

  margin-left: -75px;

  opacity: 0;

  transition: opacity 0.3s;

}


.tooltip .tooltiptext::after {

  content: "";

  position: absolute;

  top: 100%;

  left: 50%;

  margin-left: -5px;

  border-width: 5px;

  border-style: solid;

  border-color: #555 transparent transparent transparent;

}


.tooltip:hover .tooltiptext {

  visibility: visible;

  opacity: 1;

}

</style>

</head>

<body>


<br>

<!-- <input type="text" value="Hello World" id="myInput"> -->

<textarea id="myInput" style="width: 50%"></textarea>


<div class="tooltip">

<button onclick="myFunction()" onmouseout="outFunc()">

  <span class="tooltiptext" id="myTooltip">Copy to clipboard</span> 

  Copy text

  </button>

</div><br>

<textarea style="width: 50%;"></textarea>

<script>

function myFunction() {

  var copyText = document.getElementById("myInput");

  copyText.select();

  copyText.setSelectionRange(0, 99999);

  navigator.clipboard.writeText(copyText.value);

  

  var tooltip = document.getElementById("myTooltip");

  tooltip.innerHTML = "Copied: " + copyText.value;

}


function outFunc() {

  var tooltip = document.getElementById("myTooltip");

  tooltip.innerHTML = "Copy to clipboard";

}

</script>

</body>

</html>


0 Comments