Translator: Namo

The original link

One of the ongoing efforts to advance the Web platform and enable it to support new devices is to reduce the Web’s reliance on Flash. As part of this effort, we are standardizing and implementing effective features for a full Web platform, although currently only relying on Flash.

One of the reasons many sites still have Flash is because of the copy-and-paste clipboard apis. Flash provides an API that dynamically copies text to the user’s clipboard when a button is clicked. It’s used for handy features like GitHub’s copy to Clipboard button. It is also valuable in developing a text editor-like UI: rather than having the user use keyboard shortcuts or right-click menus, one-click copy is better.

< img SRC = “” p6.qhimg.com/t0117d59fca…” “/ >

However, Web APIs do not yet provide the ability to copy text to the clipboard through JavaScript. That’s why when Flash access is disabled on GitHub, an ugly gray block replaces the original copy button. Fortunately, we already have one. The HTML Editing APIs provide Document. execCommand as an entry point to execute some text Editing commands. Copy copy and cut were previously disabled in the web environment, but since Firefox 41, user-triggered callback JavaScript has been able to use both commands.


ExecCommand (“”cut””/””copy””) ‘

ExecCommand (“”cut””/””copy””) API can only be used in user-triggered callbacks, such as a click event. ExecCommand will return false if the call is attempted in another context, indicating that the command failed to execute. Running execCommand(“” Copy “”) copies the currently selected content to the clipboard. Now let’s implement a basic one-click copy button.

Var button =... ; // Input containing content to be copied var input =... ; button.addEventListener(""click"", function(event) { event.preventDefault(); // Select the content of the input element input.select(); // Copy the selection to the clipboard document.execCommand(""copy""); });Copy the code

In Firefox 41 and later, this code triggers a copy action when the button is clicked, copying the text inside the input to the system’s clipboard. However, it’s likely that you’ll need to consider incompatibility: you can use another Flash-based method as a backup, such as ZeroClipboard, or simply tell the user that their browser doesn’t support this feature.

The execCommand method returns false when it fails to execute, such as when attempting a call outside of a user-triggered callback. However, when you try to call cut and copy in older versions of Firefox, the browser throws a SecurityException. So to ensure that all exceptions are caught, wrap the call statement in a try-catch so that any caught exception is treated as a call failure.

Var button =... ; // Input containing content to be copied var input =... ; button.addEventListener(""click"", function(event) { event.preventDefault(); input.select(); Var Succeeded; // Copying the selection to the clipboard succeeded = document.execCommand(""copy""); } catch (e) { succeeded = false; } the if (succeeded) {/ / copy success} else {/ / copy failed: (}});Copy the code

The cut API is used in the same way as the cut API.


Characteristics of the test

HTML Editing APIs provides document. QueryCommandSupported (” “copy” “) method, the convenient user testing whether a command, supported by the browser. But on Firefox browsers lower than Firefox 41, this check still returns true even though the developer can’t actually use copy (an attempt to call document.execCommand(“”copy””) will result in a SecurityException). So the simplest way to support the detection of the Document. execCommand(“” Copy “”) feature in Firefox is probably this: try to use copy when the page has loaded, and detect whether a SecurityException has been thrown.

var supported = document.queryCommandSupported(""copy""); Document. ExecCommand (""copy""); if (supported) {try {document.execCommand(""copy""); } catch (e) { supported = false; } } if (! Supported) {/ / using alternate methods, such as ZeroClipboard, http://zeroclipboard.org/}Copy the code


Compatibility with other browsers

Google Chrome and Internet Explorer both support this API. Chrome and Firefox use the same restriction policy (the call must be in the event callback triggered by the user). Internet Explorer allows arbitrary calls and only asks the user if he or she is allowed to manipulate the clipboard on the first call.

For more information about this API or browser support, see:

MDN documentation for document.execCommand().

Can I use execcommand


About the author

Michael Layzell

github.com/mystor

More articles by Michael Layzell…