elia/shortenit
1
0
Fork 0
Code Issues 7 Pull requests 1 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 6853e02b1f
commit 0c44ad5c6b
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://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> </head>
<script type="text/javascript"> <script type="text/javascript">
@ -54,20 +55,24 @@
document.getElementById("url-result").value = "Please enter a valid URL!"; document.getElementById("url-result").value = "Please enter a valid URL!";
} }
function copyToClipboard() { window.onload=function() {
/* Get the text field */ console.log(ClipboardJS.isSupported())
var copyText = document.querySelector("#url-result"); var clipboard = new ClipboardJS('.btn', {
container: document.getElementById('copy-button')
});
/* Select the text field */ clipboard.on('success', function(e) {
copyText.select(); console.info('Action:', e.action);
copyText.setSelectionRange(0, 99999); /*For mobile devices*/ console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
});
/* Copy the text inside the text field */ clipboard.on('error', function(e) {
document.execCommand("copy"); console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
/* Alert the copied text */ });
alert("Copied the text: " + copyText.value);
} }
</script> </script>
<body> <body>
@ -103,7 +108,8 @@
<input type="text" id="url-result" class="form-control" readonly> <input type="text" id="url-result" class="form-control" readonly>
</div> </div>
<div class="col-3"> <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> </div>
</div> </div>