Browse Source

Moving to clipboard for copying to clipboard

master
Elia El Lazkani 2 years ago
parent
commit
0c44ad5c6b
  1. 30
      shortenit/templates/index.html

30
shortenit/templates/index.html

@ -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>

Loading…
Cancel
Save