How to copy a TEXT to Clipboard on a Button-Click | Click button copy text function

My Codes script
June 12, 2021


How to copy a TEXT to Clipboard on a Button-Click

How to copy a TEXT to Clipboard on a Button-Click

Click button copy text function


Example Link: https://codepen.io/shaikmaqsood/pen/XmydxJ

Example Link: https://drive.google.com/file/d/1j55Oqmv_WlIUaW69Jo3JncKB34UodJBG/view?usp=sharing


<head>

<style>
    /* -------------------------------------
     How to copy a TEXT to Clipboard on a Button-Click
     ------------------------------------- */
  body {
              background-color:#999999;
              font-family: 'Oswald', sans-serif;
      }
p
{
  color:#000000;
  font-size:20px;
}

.textBox
{
  height:30px;
  width:300px;
}

button
{
  height:30px;
  width:150px;
  border-radius:8px;
  padding:10px;
  font-size:20px;
  font-family: 'Oswald', sans-serif;
  height:52px;
  cursor:pointer;
  background-color:wheat;
}

</style>
</head>

<body>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

        <p style="color:wheat;font-size:55px;text-align:center;">How to copy a TEXT to Clipboard on a Button-Click</p>

<center>
<p id="p1">Hello, I'm TEXT 1</p>
<p id="p2">Hi, I'm the 2nd TEXT</p><br/>

<button onclick="copyToClipboard('#p1')">Copy TEXT 1</button>
<button onclick="copyToClipboard('#p2')">Copy TEXT 2</button>
  
<br/><br/><input class="textBox" type="text" id="" placeholder="Dont belive me?..TEST it here..;)" />
</center>



<script>
function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}
</script>

</body>
 

HOME