How to Copy Text to Clipboard With Javascript.

Posted by Dmitry

Updated on

javascript browser DOM

To copy something to the clipboard you'll need window.navigator.clipboard. Yep, that's pretty much it. Not everything must be difficult.

Here is usage example:

window.navigator.clipboard.writeText("Hello World!");

Wanna see a real life example? Click "COPY URL" at the bottom of this post.

Copy to Clipboard Example

<button data-url-copied-text="Copied!" onclick="copyURL()" role="button">Copy</button>
function copyURL() {
  this.event.preventDefault();

  const $button = this.event.target;
  const initialButtonText = $button.text;
  const urlCopiedButtonText = $button.getAttribute('data-url-copied-text');

  window.navigator.clipboard.writeText("https://abstractkitchen.com");

  $button.text = urlCopiedButtonText;
  setTimeout(function() {
    $button.text = initialButtonText;
  }, 500);
}

I hardcoded onclick="copyURL()", but you got the idea. As you can see, I went little further and implemented UI feedback with help of data-attribute data-url-copied-text, so your fellow visitors will feel more comfortable.

Cannot read properties of undefined reading 'writeText'

The use of navigator.clipboard requires a secure origin. You can create a workaround with hidden element and document.execCommand('copy'). I remember using such hacks back in the days, when jQuery was a thing, but it's up to you. I'm not gonna dive into the details — it's already well described here.

The Latest

recv() failed (104: Connection reset by peer) while reading response header from upstream

python uwsgi error snippet

Geolocate the Location of an IP Address With Cloudflare Workers and JavaScript

javascript cloudflare geolocation workers

Detect a visitor's country and city by IP address with Cloudflare Workers and JavaScript.

JavaScript Document Onload + TypeScript version

javascript DOM snippet basics typescript
🗃 JavaScript Basics

Universal code-snippet to know when HTML is ready for modern browsers.

How to Create Jinja2 Filters in Flask

python flask jinja2 snippet

In this post, I'll talk about filters. Jinja2 has a list of built-in filters, and Flask leverages them.

How to Upload Files To Bunny.net Storage

python bunny_net storage snippet

Bunny.net is a well-known CDN and storage among developers. Here is my python snippet on how to upload a file to the storage.

Flask Boilerplate and Your Guide to Flask in 2023. With SQLAlchemy.

boilerplate open source flask

Flask-Backbone is my take to create an initial structure and a set of rules, so most of my flask projects are easy to support.

How to Import CSV Files to PostgreSQL with Pgfutter

csv postgresql

Sometimes I need to upload large CSV files to PostgreSQL. CSV file might have hundreds of columns, that's why i want a tool that can do some magic for me.

How to Upload Files to DigitalOcean Spaces with Python

digitalocean python

Snippet on how to upload files to DigitalOcean Spaces with boto3 and python.

The Definitive Guide To Sitemaps With Python

open source python

Sitemaps are important. Especially for big websites. It is always a good idea to develop your website with SEO in mind. Unfortunately, most developers ignore this part.

A Short Guide To The Chinese Coordinate System

Have your ever searched google maps china offset? Most people who was in China yes. Here is my story behind this question.