elia/shortenit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Moving to clipboard for copying to clipboard

Browse source
This commit is contained in:
Elia El Lazkani 2019-10-06 00:34:08 +02:00
parent d9d763a1d1
commit bafb1c5e68
1 changed files with 18 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
shortenit/templates/index.html
View file

@ -19,6 +19,7 @@
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
</head>
<script type="text/javascript">
@ -54,20 +55,24 @@
document.getElementById("url-result").value = "Please enter a valid URL!";
}
function copyToClipboard() {
/* Get the text field */
var copyText = document.querySelector("#url-result");
window.onload=function() {
console.log(ClipboardJS.isSupported())
var clipboard = new ClipboardJS('.btn', {
container: document.getElementById('copy-button')
});
/* Select the text field */
copyText.select();
copyText.setSelectionRange(0, 99999); /*For mobile devices*/
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
});
/* Copy the text inside the text field */
document.execCommand("copy");
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
}
/* Alert the copied text */
alert("Copied the text: " + copyText.value);
}
</script>
<body>
@ -103,7 +108,8 @@
<input type="text" id="url-result" class="form-control" readonly>
</div>
<div class="col-3">
<button class="btn btn-outline-primary" type="button" id="copy-button" data-toggle="tooltip" onclick="copyToClipboard()" data-placement="button" title="Copy to Clipboard">Copy</button>
<div>
<button class="btn btn-outline-primary" data-clipboard-target="#url-result" data-clipboard-action="copy">Copy</button>
</div>
</div>
</div>