Problem description
The copy function has been added to OJ's website today. At the beginning, we used the native functions of JavaScript. The corresponding JavaScript code is as follows:
function copyDivToClipboard(containerid) {
if (window.getSelection) {
if (window.getSelection().empty) { // Chrome
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) { // Firefox
window.getSelection().removeAllRanges();
}
} else if (document.selection) { // IE?
document.selection.empty();
}
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(containerid));
range.select().createTextRange();
document.execCommand("copy");
alert("Success copy ");
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().removeAllRanges(); // clear current selection
window.getSelection().addRange(range); // to select text
document.execCommand("copy");
window.getSelection().removeAllRanges();// to deselect
alert("Success copy ");
}
}
Due to the need to remind that the copy is successful, you can only use alert to pop up the window. Of course, the user experience must be very poor.
Then I saw an open source ClipboardJS on the network, which is very powerful. According to the introduction of the official website, it is very simple to use.
ClipboardJS
The official website is https://github.com/zenorocha/clipboard.js.
usage method
Include clipboard JS
I use the website of a third-party CDN.
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
Create ClipboardJS object
<script>
new ClipboardJS('.btn');
</script>
Create HTML object
The corresponding HTML script is
<!-- Target --> <input id="foo" value="https://github.com/zenorocha/clipboard.js.git" /> <!-- Trigger --> <button class="btn" data-clipboard-target="#foo"> <img src="assets/clippy.svg" alt="Copy to clipboard" /> </button> <!-- Target --> <textarea id="bar">Mussum ipsum cacilds...</textarea> <!-- Trigger --> <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar"> Cut to clipboard </button> <!-- Trigger --> <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js" > Copy to clipboard </button>
As can be seen from the above script, we only need to support the copy function. We only need to set the class to btn and cooperate with the JavaScript script (refer to the JavaScript above for details).
Complete HTML file
<!doctype html>
<html lang="fr" class="h-100">
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
<script>
// Clipboard
var clipboard = new ClipboardJS('#copy');
</script>
</head>
<body>
<br>
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git" />
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="Copy to clipboard" />
</button>
<br>
<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>
<br>
<!-- Trigger -->
<button
class="btn"
data-clipboard-text="Just because you can doesn't mean you should — clipboard.js"
>
Copy to clipboard
</button>
</body>
</html>
BUG
A magical thing happened, and ClipboardJS didn't work. After n+1 hours of hard debugging, it is found that
var clipboard = new ClipboardJS('#copy');
It's running down here. I'm ashamed that JS just can use it and doesn't understand it. In the face of this problem, I can't think of a solution.
There may be a flash in the back. The original file is invoked in the JS script, trying to place the script to create the object into the paragraph.
Then the application happens, and the clipboard object can be generated successfully.
In other words, we must put the above JS script in the section. Tiankeng.
ClipboardJS + tooltip
ClipboardJS does not provide tooltip function. According to the official website:
Each application has different design needs, that's why clipboard.js does not include any CSS or built-in tooltip solution.
The tooltips you see on the demo site were built using GitHub's Primer. You may want to check that out if you're looking for a similar look and feel.
In other words, you need to cooperate with CSS to realize this function. After google, I found a piece of code, which is implemented by using clipboard + jquery + bootstrap. It's very useful.
Source code
<!doctype html>
<html lang="fr" class="h-100">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
</head>
<body>
<script>
// Tooltip
$('#copy').tooltip({
trigger: 'click',
placement: 'bottom'
});
function setTooltip(message) {
$('#copy').tooltip('hide')
.attr('data-original-title', message)
.tooltip('show');
}
function hideTooltip() {
setTimeout(function() {
$('#copy').tooltip('hide');
}, 1000);
}
// Clipboard
var clipboard = new ClipboardJS('#copy');
clipboard.on('success', function(e) {
setTooltip('Copied!');
hideTooltip();
});
clipboard.on('error', function(e) {
setTooltip('Failed!');
hideTooltip();
});
// var clipboard = new ClipboardJS('button');
// clipboard.on('success', function(e) {
// setTooltip('Copied!');
// hideTooltip();
// });
// clipboard.on('error', function(e) {
// setTooltip('Failed!');
// hideTooltip();
// });
</script>
<!-- Trigger -->
<br>
<br>
<br>
<!-- Trigger -->
<div class="row justify-content-center mt-5">
<button id="copy" class="btn btn-primary" data-clipboard-text="hi">
Copy to clipboard
</button>
</div>
</body>
</html>
The above files have been tested on Chrome, Firefox and Edge. The effect of operation is as follows:
Seriously, it's pretty good. ClipboardJS is the BUG, but people can't cry or laugh. It took a long time.