Introduction to the

Clipboard, copy, compatibility

test

Copying content to the clipboard is a requirement frequently encountered during front-end development. Most students will directly open the search box and start looking for component libraries written by others, while smart students will start to think:

  • What are the product usage scenarios?
  • Do you need to be compatible with many browsers?
  • Does it need to be used frequently in the project?
  • Do you need to use additional functionality provided by third-party libraries?

When the product usage scenario is not large or complex, you can use this copy to clipboard code:

/ / the source code from https://30secondsofcode.org
const copyToClipboard = str= > {
    const el = document.createElement('textarea');
    el.value = str;
    el.setAttribute('readonly'.' ');
    el.style.position = 'absolute';
    el.style.left = '-9999px';
    document.body.appendChild(el);

    const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;

    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);

    if (selected) {
        document.getSelection().removeAllRanges();
        document.getSelection().addRange(selected); }};Copy the code

The code analysis

The browser provides a native method, document.execCommand(‘copy’), to copy content to the clipboard, but it has a prerequisite for “selecting a text field or input field”, so create a Textarea text box and position it so that it is not displayed on the screen:

const el = document.createElement('textarea');
el.value = str;
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
Copy the code

Select the created Textarea element and copy the text inside it, then remove the Textarea element.

el.select();
document.execCommand('copy');
document.body.removeChild(el);
Copy the code

Why did you skip a big chunk of code?

Copying content to the clipboard, skipping code is optimized for two scenarios, depending on the product development scenario, you can choose whether to use the two code:

  • Whether the scenario includes mobile devices
  • Whether the page allows the user to select text

Optimization for mobile devices

On mobile devices, there is a problem “when the text box is selected, the virtual keyboard will pop up”, which will cause the page to blink. If the phone responds slowly, you can even see the process of the virtual keyboard pop up and disappear. One of the neat things about this code is that the input field is set to read only:

el.setAttribute('readonly'.' ');
Copy the code

Tip: Use read-only properties to prevent the virtual keyboard from popping up.

Text optimization is optional

Code of another best line is this: if the user selects a paragraph click copy to clipboard content after the copy of the selected paragraphs will disappear, her thumb on the mobile phone screen like choose the text content has always been a rather uncomfortable operation, the disappearance of the selected text is very affect the user experience.

We can use a series of cursor selection apis called Document.getSelection to help us record the text objects that the user selected:

const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
Copy the code

After the copy operation is completed, judge the selected text object and restore the previous record user selected text object:

if (selected) {
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(selected);
}
Copy the code

Grow up together

In the confused city, there is always a partner to grow up together.

  • You can click on this if you want more people to see the articlegive a like.
  • If you want to inspire your mistress thereGithubGive aLittle stars.
  • If you want to communicate more with small two add wechatm353839115.

PushMeTop originally contributed to this article