如何使用Javascript将文本复制到剪贴板。

English

作者:Dmitry

更新于

javascript browser DOM

要将某物复制到剪贴板,你需要使用window.navigator.clipboard。没错,就是这样。并不是所有东西都必须很困难。

这是一个使用示例。:

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

想看一个真实的例子吗?请点击这篇文章底部的“复制链接”按钮。

使用navigator.clipboard.writetext复制到剪贴板的示例:

<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);
}

我硬编码了 onclick="copyURL()",但你已经明白了。正如你所看到的,我进一步使用了data-attribute data-url-copied-text 来实现UI反馈,以便让你的其他访客感觉更舒适。

Cannot read properties of undefined reading 'writeText'

使用navigator.clipboard需要一个安全的来源。你可以使用隐藏元素和 document.execCommand('copy') 来创建一个解决方法。我记得在 jQuery 流行的时候就曾经使用过这样的技巧,但这取决于你自己。我不打算深入讨论细节 —— 这方面的内容已经在这篇文章中有了很好的描述。.

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 Bunnynet 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.

How to Copy Text to Clipboard With Javascript

简体中文 javascript DOM browser

Here is a short snippet on how to copy text to the clipboard with Javascript. Your visitors will thank you. Most likely not, but here we are.

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.