In this post I'll show how you can use the Clipboard API in JavaScript to make your web apps even more awesome.

First things first: What is the Clipboard API? Well, it's basically a way for JavaScript to interact with the clipboard - that's the thing you use to copy and paste text. With this API, you can add copy, cut and paste functionality to your app.

Before we move on, remember you can build your websites, landing pages, APIs, and more, with or without coding on DoTenX for free. Make sure to check it out and use it to your advantage. DoTenX is open-source and you can find the repository here: github.com/dotenx/dotenx.

Copy

Let's start with an example of a simple copy button:

<span id="exampleText">This text will be copied to clipboard.</span>
<button id="clipboardButton">Click to Copy</button>

<script>
    var clipboardBtn = document.getElementById("clipboardButton");
    var textToCopy = document.getElementById("exampleText");
    clipboardBtn.addEventListener("click", function() {
        var text = textToCopy.innerHTML;
        navigator.clipboard.writeText(text);
    });
</script>

This code creates a button with the text "Click to Copy" and a element with the text "This text will be copied to clipboard." When the button is clicked, JavaScript gets the text within the element using the innerHTML property, then it writes that text to the clipboard using the navigator.clipboard.writeText(text) method.

Cut

But you can do more than just copy text. How about cutting text? Here's an example of a text area and a button that, when clicked, it cuts the text from the text area and pastes it into our output div:

<textarea id="inputText"></textarea>
<button id="cutTextButton">Click to Cut</button>
<div id="textOutput"></div>

<textarea id="inputText"></textarea>
<button id="cutTextButton">Click to Cut</button>
<script>
    var cutTextBtn = document.getElementById("cutTextButton");
    var input = document.getElementById("inputText");
    cutTextBtn.addEventListener("click", function() {
        var selectedText = input.value.substring(input.selectionStart, input.selectionEnd);
        navigator.clipboard.writeText(selectedText);
        input.value = input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
    });
</script>

Read

You can also read text from the clipboard, like this:

<button id="paste">Paste Clipboard</button>

<script>
    var pasteButton = document.getElementById("paste");
    pasteButton.addEventListener("click", function() {
        navigator.clipboard.readText().then(function(text) {
            console.log(text);
        });
    });
</script>

Here we've created a button with the text "Paste Clipboard". When this button is clicked, JavaScript reads the text from the clipboard and logs it to the console or you could do whatever else you like with that text.

As you can see, the Clipboard API is pretty easy to use and it opens up a lot of possibilities for your web apps. Just keep in mind that the clipboard API is currently only supported in modern browser.

JavaScript Clipboard API: Take Control of Your Copy, Cut, and Paste

Copy

Cut

Read