Investigation into Web Clipboard Copying Failures

Recently, I worked on a project using Tencent’s TEA component library. It includes a Copy component that relies on copyToClipboard, which in turn depends on document.execCommand('copy'). This API has several pitfalls; here is a summary of what I encountered.

The Problem

When visiting a site via an IP-based URL, the Copy component fails to copy text if a specific DOM element is currently in full-screen mode.

Component Dependency Graph

How the Copy Component Works

Under the hood, it creates an invisible element, populates it with text, selects that text, executes document.execCommand('copy'), and then removes the element from the DOM.

Analysis

1. Deprecated API: document.execCommand('copy') is deprecated. However, it is still widely used because it can function even when the browser hasn’t explicitly granted Clipboard API permissions.
2. Full-screen Conflict: In Chrome, document.execCommand('copy') fails silently (no error, but no copy) when a DOM element is in full-screen mode.
3. Secure Context Requirement: The newer Clipboard API requires a secure context (HTTPS). On internal sites or IP-based URLs that lack HTTPS, the Clipboard API will not work.

Solution

1. Prefer the Clipboard API: Always attempt to use the modern navigator.clipboard API first. Use document.execCommand('copy') only as a fallback if the Clipboard API throws an error.
2. Full-screen Check: Use document.fullscreenElement to detect if the user is in full-screen mode. Since the fallback won’t work in this state, you should handle this explicitly (e.g., by notifying the user to exit full-screen if the modern API fails).