Copy text to clipboard can be done 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>