Clipboard API
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
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有️xgqfrms, 禁止转载 ️,侵权必究️!
Clipboard API的更多相关文章
- Chrome 66 新增异步剪贴板 API
在过去的几年里我们只能使用 document.execCommand 来操作剪贴板.不过,这种操作剪贴板的操作是同步的,并且只能读取和写入 DOM. 现在 Chrome 66 已经支持了新的 Asyn ...
- Async Clipboard AP
转自奇舞周刊,个人学习记录,侵权删 编者按:本文作者李松峰,资深技术图书译者,翻译出版过40余部技术及交互设计专著,现任360奇舞团高级前端开发工程师,360前端技术委员会委员.W3C AC代表 如果 ...
- [React Native]访问操作系统剪贴板 Clipboard
我们之前学习了TextInput组件, 有时候我们需要在TextInput组件中复制或者粘贴一些文字. React Native为开发者提供了 Clipboard API,Clipboard 组件可以 ...
- 前端 JavaScript 复制粘贴的奥义——Clipboard 对象概述
前言 作为一名资深搬砖工,你要问我用得最熟练的技能是什么,那我敢肯定且自豪的告诉你:是 Ctrl+C !是 Ctrl+V! 不信?你来看看我键盘上的 Ctrl.C 和 V 键,那油光发亮的包浆程度,不 ...
- [笔记]New in Chrome 66
原文 CSS Typed Object Model 使用CSS object model,返回的一切都是字符串 el.style.opacity = 0.3; console.log(typeof e ...
- stimulus(6300✨)
https://github.com/stimulusjs/stimulus 一个现代JS框架,不会完全占据你的前端,事实上它不涉及渲染HTML. 相反,它被设计用于增加你的HTML和刚刚够好的beh ...
- div里粘贴文字后,移动光标至最后
cursormanager.js //Namespace management idea from http://enterprisejquery.com/2010/10/how-good-c-hab ...
- [译] ContentEditable 那些好的、坏的和坑
译者注 我的上一篇译文 “[译] 通过 contentEditable 属性创建一个所见即所得的编辑器” 的原文 “Create a WYSIWYG Editor With the contentEd ...
- 如何使用JavaScript直接上传并预览粘贴板的图片?
(题图:梵高-橄榄树) 提出需求 因为工作原因,现在有一个需求就是需要用户使用QQ或者微信复制一张截图后,在div中直接粘贴这张图片,而不是采用上传的方式.类似我们在使用QQ微信时直接粘贴截图的操作, ...
随机推荐
- 【中文】【deplearning.ai】【吴恩达课后作业目录】
[目录][吴恩达课后作业目录] 吴恩达深度学习相关资源下载地址(蓝奏云) 课程 周数 名称 类型 语言 地址 课程1 - 神经网络和深度学习 第1周 深度学习简介 测验 中英 传送门 无编程作业 编程 ...
- Flask扩展点总结(信号)
信号(源码) 信号,是在flask框架中为我们预留的钩子,让我们可以进行一些自定义操作. pip3 install blinker 根据flask项目的请求流程来进行设置扩展点 1.中间件 from ...
- linux 文件目录权限
文件目录权限: 什么是文件权限: 在Linux中,每个文件都有所属的所有者,和所有组,并且规定了文件的所有者,所有组以及其他人对文件的,可读,可写,可执行等权限. 对于目录的权限来说,可读是读取目录文 ...
- COLMAP简易教程(命令行模式)
完整的 multi view stereo pipeline 会有以下步骤 structure from motion(SfM)==> camera parameters, sparse poi ...
- (转载)微软数据挖掘算法:Microsoft 神经网络分析算法(10)
前言 有段时间没有进行我们的微软数据挖掘算法系列了,最近手头有点忙,鉴于上一篇的神经网络分析算法原理篇后,本篇将是一个实操篇,当然前面我们总结了其它的微软一系列算法,为了方便大家阅读,我特地整理了一篇 ...
- 指令集架构 x86-64 x86架构的64位拓展,向后兼容于16位及32位的x86架构
https://zh.wikipedia.org/wiki/X86 x86泛指一系列英特尔公司用于开发处理器的指令集架构,这类处理器最早为1978年面市的"Intel 8086"C ...
- JVM 详解,大白话带你认识 JVM
前言 如果在文中用词或者理解方面出现问题,欢迎指出.此文旨在提及而不深究,但会尽量效率地把知识点都抛出来 一.JVM的基本介绍 JVM 是 Java Virtual Machine 的缩写,它是一个虚 ...
- Java 操作Oracle数据库
import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import ...
- 武装你的WEBAPI-OData资源更新Delta
本文属于OData系列 目录 武装你的WEBAPI-OData入门 武装你的WEBAPI-OData便捷查询 武装你的WEBAPI-OData分页查询 武装你的WEBAPI-OData资源更新Delt ...
- 一统江湖的大前端(10)——inversify.js控制反转
<大史住在大前端>前端技术博文集可在下列地址访问: [github总基地][博客园][华为云社区][掘金] 字节跳动幸福里大前端团队邀请各路高手前来玩耍,团队和谐有爱,技术硬核,字节范儿正 ...