5

JS复制粘贴 | Vue 复制粘贴 | React 复制粘贴

 1 year ago
source link: http://surest.cn/archives/205/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

JS复制粘贴 | Vue 复制粘贴 | React 复制粘贴

Published on Sep 1, 2022 in 前端 with 0 comment

JS 一键复制粘贴

以此 HTML 为基准

<div class="copyNode" contenteditable="true">点我进行复制</div>

原生写法 1

const copyNode = document.querySelector('.copyNode');
copyNode.addEventListener('copy', (event) => {
    const selection = document.getSelection();
    event.clipboardData.setData('text/plain', selection.toString().toUpperCase());
    event.preventDefault();
    console.log("复制成功!")
});

原生写法 2

const copyNode = document.querySelector('.copyNode');
copyNode.addEventListener('click', (event) => {
    navigator.clipboard.writeText("我是复制的东西")
    console.log("复制成功!")
});

https://www.npmjs.com/package/vue-clipboard2

React 包

https://www.npmjs.com/package/copy-to-clipboard

本文由 邓尘锋 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Sep 1, 2022 at 10:57 am


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK