javascript copy to clipboard without input or textarea

 Copy text to clipboard can be done without input or Textarea.

javascript copy to clipboard without input or textarea


    As we know we can copy text of  Textarea with java script. Here we discuss about copying text without Textarea or input.

Following codes may help you.

1. for single id text copy

add code

<p id="mytext1">To copy1</p>

<button id="TextToCopy1" onclick="copy_function('mytext1')" class="btn">copy</button>

Java code

<script>

function copy_function(id){

  var value = document.getElementById(id).innerHTML;

  var input_temp = document.createElement("input");

  input_temp.value = value;

  document.body.appendChild(input_temp);

  input_temp.select();

  document.execCommand("copy");

  document.body.removeChild(input_temp);

};

</script>

 

2. copy text in multiple ids in same page


add Code


<p id="mytext1">To copy1</p>

<button id="TextToCopy1" onclick="copy_function('mytext1')" class="btn">copy</button>

<p id="mytext2">To copy2</p>

<button id="TextToCopy2" onclick="copy_function('mytext2')" class="btn">COPY</button>


Java code


<script>

function copy_function(id){

  var value = document.getElementById(id).innerHTML;

  var input_temp = document.createElement("input");

  input_temp.value = value;

  document.body.appendChild(input_temp);

  input_temp.select();

  document.execCommand("copy");

  document.body.removeChild(input_temp);

};

</script>



3. You can add beautiful style for the button for matching your theme or design


CSS code


<style>

.btn{

color:red;

background:gold;

cursor: pointer;

text-align: center;

  text-decoration: none;

  display: inline-block;

  font-size: 19px;

  border-radius: 7px;

  border: 5px solid gold;

  transition-duration: 0.2s;

  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);}

.btn:hover {

  background: #4CAF50; /* Green */

   border: 5px solid #4CAF50;

  color: white;

  }

  .btn:active {

  background-color: #000;

  box-shadow: 0 5px #666;

  transform: translateY(4px);

  border: 5px solid #000;

  color: white;

  transition-duration: 0.1s;

}

</style>


5. combining all codes it looks like


<!DOCTYPE html>

<html>

<head>

<title>Copy text without text area JAVA code</title>

</head>

<body>

<style>

.btn{

color:red;

background:gold;

cursor: pointer;

text-align: center;

  text-decoration: none;

  display: inline-block;

  font-size: 19px;

  border-radius: 7px;

  border: 5px solid gold;

  transition-duration: 0.2s;

  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);}

.btn:hover {

  background: #4CAF50; /* Green */

   border: 5px solid #4CAF50;

  color: white;

  }

  .btn:active {

  background-color: #000;

  box-shadow: 0 5px #666;

  transform: translateY(4px);

  border: 5px solid #000;

  color: white;

  transition-duration: 0.1s;

}


</style>

<p id="mytext1">To copy1</p>

<button id="TextToCopy1" onclick="copy_function('mytext1')" class="btn">copy</button>

<p id="mytext2">To copy2</p>

<button id="TextToCopy2" onclick="copy_function('mytext2')" class="btn">COPY</button>

<p>Test here</p>

<textarea></textarea>

<script>

function copy_function(id){

  var value = document.getElementById(id).innerHTML;

  var input_temp = document.createElement("input");

  input_temp.value = value;

  document.body.appendChild(input_temp);

  input_temp.select();

  document.execCommand("copy");

  document.body.removeChild(input_temp);

};

</script>

</body>

</html>