This is the 22 days that I have participated in the Gwen Challenge

preface

As an experienced brick remover, if you ask me what my most skilled skill is, I am sure and proud to tell you: Ctrl+C! Is Ctrl + V!

Don’t believe it? If you look at the Ctrl, C and V keys on my keyboard, the glossy sheen of the coating will never be reached in three or five years!

There has been a saying circulating in the world of programming: CV da FA good, CV da FA wonderful! Basically see curative effect, who uses who knows! (To prevent river crabs, and use pinyin to make do)

From this sentence, we can see that the colleagues in the programming community are chasing after and fanatical about CV, which is sweeping the streets and swept across the country. At that time, I do not know how many IT heroes “bow”, even now, IT is still a programming entry required skills!

So, what is the magic of CV that makes people so fascinated and inherited from generation to generation?

Today, let’s take a look at the CV of the front-end JavaScript development world!

The old method

JavaScript, the best language in the world, must have access to the system’s clipboard, relying on the Document.execcommand () interface to copy, paste, and cut.

  • document.execCommand('copy')
  • document.execCommand('cut')
  • document.execCommand('paste')

copy

const inputEle = document.querySelector('#input');
inputEle.select();
document.execCommand('copy');
Copy the code

We get the input element, select the input content, and then invoke the copy interface to copy the input content to the clipboard.

Note that copying is best done in event listeners and triggered by the user (such as when the user clicks a button).

paste

const pasteText = document.querySelector('#output');
pasteText.focus();
document.execCommand('paste');
Copy the code

First let the input element get focus, then call the paste interface to paste the clipboard content into the input.

shear

Use the same as copy.

summary

From the example above, the clipboard API is simple to use, but it has the following disadvantages:

  1. It is not flexible enough to only copy selected content to the clipboard, not write anything to the clipboard.
  2. It is a synchronous operation and the page will stall if you copy/paste a lot of data.
  3. Some browsers also pop up a box asking for permission, and the page stops responding before the user makes a choice.

Evolution — the Clipboard

In order to make JavaScript more flexible operation Clipboard, but also to adapt to the historical trend of JS development, Clipboard API came into being. It is the next generation of clipboard manipulation methods that are more powerful and reasonable than the traditional document.execcommand () method.

The Clipboard interface implements the Clipboard API and provides read and write access to the system Clipboard if the user grants the appropriate permissions. In Web applications, the Clipboard API can be used to implement cut, copy, and paste capabilities.

All of its operations are asynchronous, return Promise objects, and do not cause the page to stall. Moreover, it can put any content (such as pictures) into the clipboard.

The API is designed to replace clipboard access using Document.execcommand ().

The basic use

The navigator.clipboard property returns the ClipBoard object through which all operations are performed.

(async() = > {const text = await navigator.clipboard.readText();
    console.log(text); }) ();Copy the code

If the navigator.clipboard property returns undefined, the current browser does not support this API.

Security restrictions

  1. Chrome stipulates that only HTTPS pages can use this API. However, the development environment (localhost) allows the use of non-encrypted protocols.
  2. You need to explicitly obtain the user’s permission when calling. The Permissions implementation uses the Permissions API and has two Permissions associated with the clipboard:clipboard-write(Write permission) andclipboard-read(Read permission). Write permission is automatically granted to the script, while read permission must be given with the explicit consent of the user. That is, when you write to the clipboard, the script can do it automatically, but when you read the clipboard, the browser will pop up a dialog asking if the user agrees to read it.

The script always reads the clipboard of the current page. One problem with this is that if you paste the relevant code into the developer tool and run it directly, you may get an error because the current page is a developer tool window, not a web page.

Methods calling clipboard objects will not succeed if the user does not use the Permissions API in due time to grant Permissions and “clipboard-read” or “clipboard-write” Permissions.

methods

The Clipboard object provides four methods for reading and writing the Clipboard. They are both asynchronous methods that return Promise objects.

  • read()Reads data (such as an image) from the clipboard and returns a Promise object.
  • readText()Read the text from the operating system and return a Promise object.
  • write()Writes arbitrary data to the operating system clipboard.
  • writeText()Writes text to the operating system clipboard.

Browser compatibility

Currently, various browser vendors are gradually starting to support Clipboard objects and methods. The compatibility is as follows:

conclusion

A summary of the above:

  1. Method of the Clipboard object that returns a Promise object
  2. Note that Clipboard has certain security restrictions.
  3. Running Clipboard on the console may cause an error.

~

~

Thanks for reading!

~

Learn interesting knowledge, meet interesting friends, shape interesting soul!

I am the author of programming Samadhi, yi Wang, my public account is “programming Samadhi”, welcome to pay attention to, I hope you can give me more advice!

You come, with expectations, I have ink to welcome! You return, no matter gain or loss, only to yu Yun give each other!

Knowledge and skills should be paid equal attention to, internal force and external power should be repaired simultaneously, theory and practice should grasp both hands, both hands should be hard!