Here I'm giving a demo as to how to copy a Text directly to clicpboard without a Flash...
A Pen by Shaik Maqsood on CodePen.
<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> |
function copyToClipboard(element) { | |
var $temp = $("<input>"); | |
$("body").append($temp); | |
$temp.val($(element).text()).select(); | |
document.execCommand("copy"); | |
$temp.remove(); | |
} |
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; | |
} |