Clipboard API

click copy



click copy demo



    clickGetNewsLink(data_ref = `newsLink`) {
let that = this;
let newsLink = document.querySelector(`[data-uid="${data_ref}"]`);
// let newsLink = document.querySelector(`[data-uid="newsLink"]`);
if (newsLink) {
let result = that.commonHandle.newsLink || ``;
let input = newsLink.lastElementChild;
input.addEventListener(`click`, (e) => {
try {
if (result) {
input.select();
document.execCommand("copy");
that.$hMessage.success(`资讯链接地址, 复制成功!`);
} else {
that.$hMessage.info(`资讯链接地址, 无法复制!`);
}
} catch (err) {
console.log(`click copy error =`, err);
that.$hMessage.error(`你的浏览器太古老了,暂时不支持点击复制的功能!`);
}
});
}
},
clickGetNewsId() {
let that = this;
let newsID = document.querySelector(`[data-uid="newsId"]`);
if (newsID) {
let result = that.commonHandle.newsId || ``;
let input = newsID.lastElementChild;
// input.style = `width: 100%; min-width: 217px; color: #000; cursor: pointer !important;`;
input.addEventListener(`click`, (e) => {
try {
if (result) {
input.select();
document.execCommand("copy");
that.$hMessage.success(`资讯 ID, 复制成功!`);
} else {
that.$hMessage.info(`资讯 ID 为空, 无法复制!`);
}
} catch (err) {
console.log(`click copy error =`, err);
that.$hMessage.error(`你的浏览器太古老了,暂时不支持点击复制的功能!`);
}
});
} else {
//
}
},

refs

https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API

https://clipboardjs.com/



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!

原创文章,版权所有️xgqfrms, 禁止转载 ️,侵权必究️!


Clipboard API的更多相关文章

  1. Chrome 66 新增异步剪贴板 API

    在过去的几年里我们只能使用 document.execCommand 来操作剪贴板.不过,这种操作剪贴板的操作是同步的,并且只能读取和写入 DOM. 现在 Chrome 66 已经支持了新的 Asyn ...

  2. Async Clipboard AP

    转自奇舞周刊,个人学习记录,侵权删 编者按:本文作者李松峰,资深技术图书译者,翻译出版过40余部技术及交互设计专著,现任360奇舞团高级前端开发工程师,360前端技术委员会委员.W3C AC代表 如果 ...

  3. [React Native]访问操作系统剪贴板 Clipboard

    我们之前学习了TextInput组件, 有时候我们需要在TextInput组件中复制或者粘贴一些文字. React Native为开发者提供了 Clipboard API,Clipboard 组件可以 ...

  4. 前端 JavaScript 复制粘贴的奥义——Clipboard 对象概述

    前言 作为一名资深搬砖工,你要问我用得最熟练的技能是什么,那我敢肯定且自豪的告诉你:是 Ctrl+C !是 Ctrl+V! 不信?你来看看我键盘上的 Ctrl.C 和 V 键,那油光发亮的包浆程度,不 ...

  5. [笔记]New in Chrome 66

    原文 CSS Typed Object Model 使用CSS object model,返回的一切都是字符串 el.style.opacity = 0.3; console.log(typeof e ...

  6. stimulus(6300✨)

    https://github.com/stimulusjs/stimulus 一个现代JS框架,不会完全占据你的前端,事实上它不涉及渲染HTML. 相反,它被设计用于增加你的HTML和刚刚够好的beh ...

  7. div里粘贴文字后,移动光标至最后

    cursormanager.js //Namespace management idea from http://enterprisejquery.com/2010/10/how-good-c-hab ...

  8. [译] ContentEditable 那些好的、坏的和坑

    译者注 我的上一篇译文 “[译] 通过 contentEditable 属性创建一个所见即所得的编辑器” 的原文 “Create a WYSIWYG Editor With the contentEd ...

  9. 如何使用JavaScript直接上传并预览粘贴板的图片?

    (题图:梵高-橄榄树) 提出需求 因为工作原因,现在有一个需求就是需要用户使用QQ或者微信复制一张截图后,在div中直接粘贴这张图片,而不是采用上传的方式.类似我们在使用QQ微信时直接粘贴截图的操作, ...

随机推荐

  1. CNN可视化技术总结(一)--特征图可视化

    导言: 在CV很多方向所谓改进模型,改进网络,都是在按照人的主观思想在改进,常常在说CNN的本质是提取特征,但并不知道它提取了什么特征,哪些区域对于识别真正起作用,也不知道网络是根据什么得出了分类结果 ...

  2. [微信小程序]字体文件,字体图标(.ttf,.woff,woff2)等无法显示问题

    一. 背景 项目引用了第三方UI框架Vant-weapp,但是前几天Vant的cdn被运营商封禁,导致van-icon无法使用. 有赞官方在Github上给出了在小程序app.wxss上添加以下代码的 ...

  3. jQuery 点击input框标题收起

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 一套高可用、易伸缩、高并发的IM群聊、单聊架构方案设计实践

    一套高可用.易伸缩.高并发的IM群聊.单聊架构方案设计实践 一套高可用.易伸缩.高并发的IM群聊.单聊架构方案设计实践-IM开发/专项技术区 - 即时通讯开发者社区! http://www.52im. ...

  5. worker 启动时向 etcd 注册自己的信息,并设置一个带 TTL 的租约,每隔一段时间更新这个 TTL,如果该 worker 挂掉了,这个 TTL 就会 expire 并删除相应的 key。

    1.通过etcd中的选主机制,我们实现了服务的高可用.同时利用systemd对etcd本身进行了保活,只要etcd服务所在的机器没有宕机,进程就具备了容灾性. https://mp.weixin.qq ...

  6. 挖掘隐藏在源码中的Vue技巧!

    前言 最近关于Vue的技巧文章大热,我自己也写过一篇(vue开发中的"骚操作"),但这篇文章的技巧是能在Vue的文档中找到蛛丝马迹的,而有些文章说的技巧在Vue文档中根本找不到踪迹 ...

  7. loj10009钓鱼___vector的调试

    题目描述 在一条水平路边,有 n 个钓鱼湖,从左到右编号为1,2,...,n .佳佳有 h 个小时的空余时间,他希望利用这个时间钓到更多的鱼.他从1  出发,向右走,有选择的在一些湖边停留一定的时间( ...

  8. HDU1823 Luck ans Love 二维线段树

    Luck and Love HDU - 1823 世界上上最远的距离不是相隔天涯海角 而是我在你面前 可你却不知道我爱你                 ―― 张小娴 前段日子,枫冰叶子给Wiskey ...

  9. JVM 线上故障排查

    JVM 线上故障排查 Linux 1.1 CPU 1.2 内存 1.3 存储 1.4 网络 一.CPU 飚高 寻找原因 二.内存问题排查 三.一般排查问题的方法 四.应用场景举例 4.1 怎么查看某个 ...

  10. idea中将普通工程设置为maven项目

    只需要在工程上右键,"Add Frameworks support...",然后选择Maven即可