This is the first day of my participation in the More text Challenge. For details, see more text Challenge

The problem

Recently in the APP to make an H5 activity, need to copy voucher code, using the previous encapsulated copy function;

The idea is to create an input element and set its value to the copied text; Document.execcommand (‘copy’) to the clipboard. Finally, delete the element

Input You need to set readonly to prevent page jitter due to cursor focus during select.

The code is as follows:

  /** * Copy text *@param {string} Text The copied text */
  copyText (text) {
    const input = document.createElement('input')
    document.body.appendChild(input)
    input.setAttribute('readonly'.'readonly')
    input.setAttribute('value', text)
    input.select()
    try {
      document.execCommand('copy')}catch (err) { }
    document.body.removeChild(input)
  }
Copy the code

Three under five divided by two, a shuttle is not difficult, and then the local test is ok, submit the test.

Unexpectedly, near the launch, the test raised a problem, in ios12 phones can not achieve replication, android normal;

explore

Preliminary inference is compatibility problem;

Exec.select () cannot be selected, so document.execCommand(‘copy’) cannot be executed.

To do that?

Someone on the Internet recommended clipboard.js, and I was thinking, since so many people use clipboard.js, it should solve this problem; So I went to Github to see its source code, understand the next is how to solve

A search, sure enough, yielded something;

research

Clipboard. js uses a select NPM package internally; This package is mainly about deselecting the copied content

Extract part of the core code to show:

var isReadOnly = element.hasAttribute('readonly');
if(! isReadOnly) { element.setAttribute('readonly'.' ');
}
element.select();
element.setSelectionRange(0, element.value.length); // The point is this sentence

if(! isReadOnly) { element.removeAttribute('readonly');
}
Copy the code

See? He told me much of the code above is mainly element. SetSelectionRange (0, element. The value. Length);

Ok, so I’m going to select text by text selection, nice;

MDN explanation:

HTMLInputElement. SetSelectionRange method is used to set the < input > or < textarea > element in the beginning and end of the currently selected text.

HTMLInputElement.setSelectionRange(selectionStart, selectionEnd [, selectionDirection]);

Accepts three parameters; The first argument: index at the beginning of the string The second argument: index at the end of the string The third argument: indicates the string in which the direction is selected. The optional values are forward: start from the beginning backward: Start from the end None: The default value, indicating that the direction is not determined

You can check out the setSelectionRange link for more information

The solution

Finally, I added this setSelectionRange method, and it passed, ios and Android;

The complete code is as follows:

  /** * Copy text *@param {string} Text The copied text */
  copyText (text) {
    const input = document.createElement('input')
    document.body.appendChild(input)
    input.setAttribute('readonly'.'readonly')
    input.setAttribute('value', text)
    input.select()
    input.setSelectionRange(0, text.length)
    try {
      document.execCommand('copy')}catch (err) { }
    document.body.removeChild(input)
  }
Copy the code

Conclusion:

If you don’t want to do this, you can use the clipboard.js library, but I want to do it myself, I don’t want to introduce another library, so let’s do it

If you have any comments, please leave a comment