This Blog describes, how we can copy to clipboard using JavaScript. Copying content from a web form without needing to use the default browser functions. For this i am using ZeroClipboard functionality in the JavaScript.
3.Here is the following code you have to add in script, HTML, and can add styles(CSS) for it.
<div class="email-modal">
<div >
<div role="document">
<h4>Text To Copy:</h4>
<div class="modal-body">
<textarea class="text_copy" rows="5" cols="100" >text to Copy</textarea>
</div>
<br>
<div>
<button id='clip_board' data-clipboard-text="" class="copy-button">Copy to ClipBoard</button>
</div>
</div>
</div>
</div><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://zeroclipboard.org/javascripts/zc/v2.1.6/ZeroClipboard.js"></script>
<script type="text/javascript">
$('#clip_board').attr('data-clipboard-text', $(".text_copy").text())
window.onload = function(){
var client = new ZeroClipboard(document.getElementsByClassName("copy-button") );
client.on( "ready", function( readyEvent ) {
client.on( "aftercopy", function( event ) {
alert("Copied.." );
});
});
}
</script>Here "copy-button" is "button class" mentioned in the html whis reads your html markup content.