Rumah > hujung hadapan web > tutorial js > JS实现粘贴到剪贴板实例代码分享

JS实现粘贴到剪贴板实例代码分享

小云云
Lepaskan: 2018-03-13 16:26:55
asal
1296 orang telah melayarinya

本文主要和大家分享JS实现粘贴到剪贴板实例代码,目前常见的实现粘贴到剪贴板主要有以下两种方法,希望能帮助到大家。

第三方库 clipboard
原生JS, 主要是 document.execCommand方法
第一种方法按照文档说明,设置触发元素的data-clipboard-text 或者 data-clipboard-target即可,不做说明,详见文档

第二种方法:
document.execCommand

这个方法的兼容性其实不算很好,特别是移动端,具体这里有, 但clipboard针对部分机型也有问题,所以具体使用还是得看情况, 使用该方法前要先看浏览器是否支持bool = document.execCommand(‘copy’)

MDN对上述方法的解释如下:

当一个HTML文档切换到设计模式 designMode时,文档对象暴露 execCommand 方法,该方法允许运行命令来操纵可编辑区域的内容。

注意加粗部分,设计模式 ,即:使用前我们需切换文档模式为设计模式

document.designMode = 'on'
Salin selepas log masuk

完成运行命令之后再设置值为off
还有个加粗部分,可编辑区域 ,默认的input和textarea元素是可编辑(设置一个元素的contenteditable=”true”也可激活元素的编辑模式)

先来看表单元素如何实现

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'})
Salin selepas log masuk
Salin selepas log masuk

为避免出现光标或者拉起输入法,需要给元素设置readonly属性

inputEle.select()方法在一些浏览器中有时不能选中所有内容,这时需要利用inputeElement的setSelectionRange方法:

HTMLInputElement.setSelectionRange 方法可以从一个被 focused 的
元素中选中特定范围的内容。

综上加两行:

...inputEle.focus()
inputEle.setSelectionRange(0, inputEle.value.length)
document.execCommand('copy')...
Salin selepas log masuk
Salin selepas log masuk

如果不是input等表单元素,不能使用select和setSelectRange的话,那么我们可以使用getSelection和createRange方法来模拟这个过程了,Selection对象表示用户选择的文本范围或光标的当前位置,满足执行execComman命令的可编辑活动区域,如下

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()
Salin selepas log masuk
Salin selepas log masuk

上述针对非input,textarea等表单元素也能实现了
原文链接:segmentfault.com
详细文章:https://github.com/axuebin/articles/issues/26

目前常见的实现粘贴到剪贴板主要有以下两种方法:

第三方库 clipboard
原生JS, 主要是 document.execCommand方法
第一种方法按照文档说明,设置触发元素的data-clipboard-text 或者 data-clipboard-target即可,不做说明,详见文档

第二种方法:
document.execCommand

这个方法的兼容性其实不算很好,特别是移动端,具体这里有, 但clipboard针对部分机型也有问题,所以具体使用还是得看情况, 使用该方法前要先看浏览器是否支持bool = document.execCommand(‘copy’)

MDN对上述方法的解释如下:

当一个HTML文档切换到设计模式 designMode时,文档对象暴露 execCommand 方法,该方法允许运行命令来操纵可编辑区域的内容。

注意加粗部分,设计模式 ,即:使用前我们需切换文档模式为设计模式

document.designMode = 'on'
Salin selepas log masuk

完成运行命令之后再设置值为off
还有个加粗部分,可编辑区域 ,默认的input和textarea元素是可编辑(设置一个元素的contenteditable=”true”也可激活元素的编辑模式)

先来看表单元素如何实现

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'})
Salin selepas log masuk
Salin selepas log masuk

为避免出现光标或者拉起输入法,需要给元素设置readonly属性

inputEle.select()方法在一些浏览器中有时不能选中所有内容,这时需要利用inputeElement的setSelectionRange方法:

HTMLInputElement.setSelectionRange 方法可以从一个被 focused 的
元素中选中特定范围的内容。

综上加两行:

...inputEle.focus()
inputEle.setSelectionRange(0, inputEle.value.length)
document.execCommand('copy')...
Salin selepas log masuk
Salin selepas log masuk

如果不是input等表单元素,不能使用select和setSelectRange的话,那么我们可以使用getSelection和createRange方法来模拟这个过程了,Selection对象表示用户选择的文本范围或光标的当前位置,满足执行execComman命令的可编辑活动区域,如下

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()
Salin selepas log masuk
Salin selepas log masuk

上述针对非input,textarea等表单元素也能实现了
相关推荐:

JavaScript复制内容到剪贴板实现代码

JS操作剪贴板代码分享

JavaScript实现复制到剪贴板的方法总结

Atas ialah kandungan terperinci JS实现粘贴到剪贴板实例代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan