JavaScript
How to Use the Clipboard API
script.js
// AZUL CODING ---------------------------------------
// JavaScript - How to Use the Clipboard API
// https://youtu.be/8VaGfDyP4l4
/* Part 1: Copy and paste text */
function copyText() {
let val = document.getElementById("copy-textbox").value;
navigator.clipboard.writeText(val).then(function() {
alert("Text copied to clipboard");
});
}
function pasteText() {
navigator.clipboard.readText().then(function(clipText) {
document.getElementById("paste-textbox").value = clipText
}, function() {
alert("Failed to access clipboard");
});
}
/* Part 2: Using event listeners */
function setMessage(message) {
document.getElementById("event-text").innerText = message;
setTimeout(() => {
document.getElementById("event-text").innerText = "";
}, 2000);
}
document.addEventListener("DOMContentLoaded", function(event) {
var copyPasteTextbox = document.getElementById("copy-paste-textbox");
copyPasteTextbox.addEventListener('cut', (event) => {
let selection = document.getSelection().toString().toUpperCase();
event.clipboardData.setData('text/plain', selection);
let val = copyPasteTextbox.value;
let start = copyPasteTextbox.selectionStart;
let end = copyPasteTextbox.selectionEnd;
copyPasteTextbox.value = val.slice(0, start) + val.slice(end);
copyPasteTextbox.setSelectionRange(start, start);
setMessage("Cut text: " + selection);
event.preventDefault();
});
copyPasteTextbox.addEventListener('copy', (event) => {
let selection = document.getSelection().toString();
setMessage("Copied text: " + selection);
});
copyPasteTextbox.addEventListener('paste', (event) => {
let paste = (event.clipboardData || window.clipboardData).getData('text');
setMessage("Pasted text: " + paste);
});
});
/* Part 3: Pasting images */
document.onpaste = function(event) {
let data = event.clipboardData || window.clipboardData;
if (data.files.length) {
let file = data.files[0];
if (file.type.startsWith("image/")) {
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
let img = document.getElementById("clipboard-image");
img.setAttribute("src", reader.result);
document.getElementById("filename").innerText = file.name;
}
}
}
};index.html
<!-- AZUL CODING --------------------------------------- -->
<!-- JavaScript - How to Use the Clipboard API -->
<!-- https://youtu.be/8VaGfDyP4l4 -->
<!DOCTYPE html>
<html>
<head>
<title>Clipboard API - Azul Coding</title>
<style>
body {
margin: 30px;
}
* {
font-family: 'Roboto';
}
p, button, input[type=text] {
font-size: 16px;
}
button {
display: inline-block;
margin: 5px;
padding: 5px 10px;
min-width: 70px;
}
input[type=text] {
padding: 5px;
width: 300px;
}
</style>
<script src="script.js"></script>
</head>
<body>
<h1>Clipboard API</h1>
<!-- Part 1 -->
<p>Copy and paste text</p>
<input type="text" id="copy-textbox">
<button onclick="copyText();">Copy</button><br>
<input type="text" id="paste-textbox">
<button onclick="pasteText();">Paste</button>
<!-- Part 2 -->
<p>Using event listeners</p>
<input type="text" id="copy-paste-textbox">
<p id="event-text"></p>
<!-- Part 3 -->
<p>Pasting images</p>
<img src="" id="clipboard-image" width="300">
<p id="filename"></p>
</body>
</html>
