JS implementation of pasting to clipboard example code sharing

This article mainly shares with you the JS example code for pasting to the clipboard. Currently, there are two common methods for pasting to the clipboard. I hope it can help you.

Third-party library clipboard
Native JS, mainly document.execCommand method
The first method is to set the data-clipboard-text or data-clipboard- of the trigger element according to the documentation. Just target, no explanation, please refer to the document

Second method:
document.execCommand

The compatibility of this method is actually not very good, especially for mobile terminals. The details are here, but clipboard also has problems with some models, so the specific use depends on the situation. Before using this method, you must first check whether the browser supports bool = document.execCommand('copy')

MDN Right The explanation of the above method is as follows:

When an HTML document switches to design mode designMode, the document object exposes the execCommand method, which allows running commands to manipulate the content of the editable area.

Pay attention to the bold part, design mode, that is: before use, we need to switch the document mode to design mode

document.designMode = 'on'

After completing the running command, set the value to off
There is also a bold Part, editable area, the default input and textarea elements are editable (setting contenteditable="true" of an element can also activate the element's editing mode)

Let's first look at how to implement form elements

ele.addEventListener('click', () => {    document.designMode = 'on'
    let bool = document.execCommand('copy')    if (!bool) {
        alert('sorry, 手动复制吧')
    } else {        let val = 'something'
        let inputEle = document.createElement('input')        document.body.appendChild(inputEle)
        inputEle.setAttribute('value', val)
        inputEle.setAttribute('readonly', 'readonly')
        inputEle.select()        document.execCommand('copy')        document.body.removeChild(inputEle)
        alert('copied')
    }    document.designMode = 'off'})

In order to avoid the cursor or pulling up the input method, you need to set the readonly attribute to the element.

The inputEle.select() method sometimes cannot select all content in some browsers. In this case, you need to use the setSelectionRange method of inputElement. :

HTMLInputElement.setSelectionRange method can select a specific range of content from a focused
element.

To sum up, add two lines:

...inputEle.focus()
inputEle.setSelectionRange(0, inputEle.value.length)
document.execCommand('copy')...

If it is not a form element such as input and select and setSelectRange cannot be used, then we can use the getSelection and createRange methods to simulate this process. The Selection object represents The text range selected by the user or the current position of the cursor satisfies the editable active area for executing the execComman command, as follows

let range = document.createRange()let tar = document.querySelector('#code')
range.selectNodeContents(tar)let selection = window.getSelection()
selection.removeAllRanges()
selection.addRange(range)document.execCommand('copy')
selection.removeAllRanges()

The above can also be implemented for non-input, textarea and other form elements
Original link: segmentfault. com
Detailed article: https://github.com/axuebin/articles/issues/26

There are currently two common methods of pasting to the clipboard:

Third-party library clipboard
Native JS, mainly the document.execCommand method
The first method is to set the data-clipboard-text or data-clipboard-target of the trigger element according to the document instructions. No explanation is given. For details, see Document

The second method:
document.execCommand

The compatibility of this method is actually not very good, especially for mobile terminals. The details are here, but the clipboard is suitable for some models. There are also problems, so the specific use depends on the situation. Before using this method, you must first check whether the browser supports bool = document.execCommand('copy')

MDN’s explanation of the above method is as follows:

When an HTML document switches to design mode designMode, the document object exposes the execCommand method, which allows running commands to manipulate the content of the editable area.

Pay attention to the bold part, design mode, that is: before use, we need to switch the document mode to design mode

document.designMode = 'on'

After completing the running command, set the value to off
There is also a bold Part, editable area, the default input and textarea elements are editable (setting contenteditable="true" of an element can also activate the element's editing mode)

Let's first look at how to implement form elements

ele.addEventListener('click', () => {    document.designMode = 'on'
    let bool = document.execCommand('copy')    if (!bool) {
        alert('sorry, 手动复制吧')
    } else {        let val = 'something'
        let inputEle = document.createElement('input')        document.body.appendChild(inputEle)
        inputEle.setAttribute('value', val)
        inputEle.setAttribute('readonly', 'readonly')
        inputEle.select()        document.execCommand('copy')        document.body.removeChild(inputEle)
        alert('copied')
    }    document.designMode = 'off'})

In order to avoid the cursor or pulling up the input method, you need to set the readonly attribute to the element.

The inputEle.select() method sometimes cannot select all content in some browsers. In this case, you need to use the setSelectionRange method of inputElement. :

HTMLInputElement.setSelectionRange method can select a specific range of content from a focused
element.

To sum up, add two lines:

...inputEle.focus()
inputEle.setSelectionRange(0, inputEle.value.length)
document.execCommand('copy')...

If it is not a form element such as input and select and setSelectRange cannot be used, then we can use the getSelection and createRange methods to simulate this process. The Selection object represents The text range selected by the user or the current position of the cursor satisfies the editable activity area for executing the execComman command, as follows

let range = document.createRange()let tar = document.querySelector('#code')
range.selectNodeContents(tar)let selection = window.getSelection()
selection.removeAllRanges()
selection.addRange(range)document.execCommand('copy')
selection.removeAllRanges()

The above can also be implemented for non-input, textarea and other form elements
Related recommendations:

JavaScript copy content to clipboard implementation code

JS operation clipboard code sharing

JavaScript implementation code to copy to clipboard Summary of board methods

The above is the detailed content of JS implementation of pasting to clipboard example code sharing. For more information, please follow other related articles on the PHP Chinese website!