Salesforce LWC学习(二十八) 复制内容到系统剪贴板(clipboard)
本篇参考:
https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard
https://developer.salesforce.com/docs/component-library/tools/locker-service-viewer
https://github.com/zenorocha/clipboard.js(第三方插件库,感兴趣可以自己实现)
我们在做项目得时候,有时需要将指定内容复制到剪贴板。对前端玩的好得会知道,js得浏览器扩展功能中包含和系统剪贴板得交互,详情可以查看最上方链接。纯HTML代码如下demo,这种demo当然百度一大堆。
<button onclick="handleCopy()">复制内容到剪贴板</button>
<script type="text/javascript">
function handleCopy(){
var tag = document.createElement('textarea');
tag.setAttribute('id', 'input_test_id');
tag.value = 'test copy value \nthis is another line content';
document.getElementsByTagName('body')[0].appendChild(tag);
document.getElementById('input_test_id').select();
document.execCommand('copy');
document.getElementById('input_test_id').remove();
alert('复制成功');
}
</script>
浏览器运行效果:当点击 复制内容到剪贴板按钮以后,‘test copy value this is another line content’内容会赋值到剪贴板(换行展示),展示alert,当我们在邮件或者其他文本工具中 右键粘贴,便会将我们复制内容粘贴。
这里得核心语句是使用了document.execCommand实现了复制得功能,那么为什么要先生成一个textarea框,然后再移除掉呢,我们查看一下这个方法在MDN得定义。
通过定义我们可以发现,使用 document.execCommand得前提是只允许操纵可编辑内容区域得元素,为了支持换行复制内容,所以我们只能先生成一个 textarea,然后进行拷贝操作以后,在移除。了解了以后,我们进行lwc得编程实现。
在我们进行lwc得编程实现以前,需要先了解lwc得限制,即lwc不是支持所有得document得函数,因为lwc通过 lightning locker保证前端得安全性,通过上面得链接可以查看到lwc中得 locker API viewer中提供得哪些对应得document函数是安全得可用的。
上述得功能都在locker 支持内,所以lwc代码也可以顺利生成。demo如下:
clipboardDemo.html
<template>
<lightning-button label="点我复制" onclick={handleCopyToClickboardEvent}></lightning-button>
</template>
clipboardDemo.js
import { LightningElement } from 'lwc'; export default class ClipboardDemo extends LightningElement {
handleCopyToClickboardEvent(event) {
let tag = document.createElement('textarea');
tag.setAttribute('id', 'input_test_id');
tag.value = 'test copy value\nthis is another line content';
document.getElementsByTagName('body')[0].appendChild(tag);
document.getElementById('input_test_id').select();
document.execCommand('copy');
document.getElementById('input_test_id').remove();
alert('复制成功');
}
}
总结:篇中简单描述如何在lwc中实现 复制内容到剪贴板。篇中有错误地方还请指出,有不懂欢迎留言。
Salesforce LWC学习(二十八) 复制内容到系统剪贴板(clipboard)的更多相关文章
- Salesforce LWC学习(二十六) 简单知识总结篇三
首先本篇感谢长源edward老哥的大力帮助. 背景:我们在前端开发的时候,经常会用到输入框,并且对这个输入框设置 required或者其他的验证,当不满足条件时使用自定义的UI或者使用标准的 inpu ...
- Salesforce LWC学习(二十五) Jest Test
本篇参看: https://trailhead.salesforce.com/content/learn/modules/test-lightning-web-components https://j ...
- Salesforce LWC学习(二十二) 简单知识总结篇二
本篇参看: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reactivity_fi ...
- Salesforce LWC学习(二十九) getRecordNotifyChange(LDS拓展增强篇)
本篇参考: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/data_ui_api https ...
- Salesforce LWC学习(二十四) Array.sort 浅谈
本篇参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort sal ...
- Salesforce LWC学习(三十八) lwc下如何更新超过1万的数据
背景: 今天项目组小伙伴问了一个问题,如果更新数据超过1万条的情况下,有什么好的方式来实现呢?我们都知道一个transaction只能做10000条DML数据操作,那客户的操作的数据就是超过10000 ...
- Salesforce LWC学习(三十九) lwc下quick action的recordId的问题和解决方案
本篇参考: https://developer.salesforce.com/docs/component-library/bundle/force:hasRecordId/documentation ...
- Salesforce LWC学习(四十) dynamic interaction 浅入浅出
本篇参考: Configure a Component for Dynamic Interactions in the Lightning App Builder - Salesforce Light ...
- Salesforce LWC学习(三十) lwc superbadge项目实现
本篇参考:https://trailhead.salesforce.com/content/learn/superbadges/superbadge_lwc_specialist 我们做lwc的学习时 ...
随机推荐
- arm-linux 修改rootfs登录名和密码
1.保证文件系统busybox中已经配置了login登录功能. 2.修改命令行前缀名 (1)进到/etc/sysconfig,找到HOSTNAME文件,修改里面为想要的登录名后,之后再重新加载文件系统 ...
- 深度分析:mybatis的底层实现原理,看完你学会了吗?
前言 最近在和粉丝聊天的时候被粉丝问到jdbc和mybatis底层实现这一块的问题,而且还不止一个小伙伴问到,于是我似乎认识到了问题的严重性,我花了两天时间整理了一下自己的认识和网上查阅的资料写了这篇 ...
- ABBYY FineReader 14新建任务窗口给我们哪些帮助?
当您启动ABBYY FineReader时, 新任务 将打开一个窗口,在其中您可以轻松打开.扫描.创建或对比文档. 如果您没有看到此 内置任务 窗口(比如,如果您关闭了该窗口,或者您通过在 Windo ...
- mac用户怎么保护自己的隐私安全?
使用过Windows系统的小伙伴们应该都知道,Windows系统下有360电脑管家和腾讯电脑管家等几款著名清理软件,专门用于清理电脑缓存.垃圾文件以及清除浏览痕迹,这对于Windows用户是大大节省了 ...
- 如何改变CorelDRAW的外观主题皮肤?
CorelDRAW,我们通常也简称为CDR,是一款专业而且使用广泛的矢量图形绘制软件,也常用于绘制图形以及平面设计中.今天我们以CorelDRAW 2020来为大家演示一下,如何改变CorelDRAW ...
- H5系列之video自己编写控制栏
首先来了解一下 video, video呢,是H5 的标签,别人说的 H5播放器,没错 就是他了,利用video标签,可以实现视频播放. 但是啊,你会发现,在不同的浏览器上,播放器的 控制栏,都是不一 ...
- Crossing River 题解(贪心)
题目链接 题目大意 t组数据(t<=20) 给你n个人(n<=1000)过河,每个人都有权值,一条船,每次船最多运2个人,每次的花费为两个人的较大花费 求所有人都过河需要的最小花费 题目思 ...
- Qt5字符串编码转换学习
目录 1.通过Python3示例探索常用字符串编码 UTF8 ANSI Unicode 小结 2.Qt5中使用QTextCodec进行编码转换 小结 1.通过Python3示例探索常用字符串编码 下面 ...
- 实用主义当道——GitHub 热点速览 Vol.48
作者:HelloGitHub-小鱼干 当你看到实用为本周的关键词时,就应该知道本周的 GitHub 热点霸榜的基本为高星老项目,例如:知名的性能测试工具 k6,让你能在预生产环境和 QA 环境中以高负 ...
- 20201101_Python的虚拟环境问题
虚拟环境使用总结: 1. 安装创建虚拟环境要使用的工具virtualenv pip install virtualenv -i https://pypi.douban.com/simple/ #使用 ...