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. Beating JSON performance with Protobuf https://auth0.com/blog/beating-json-performance-with-protobuf/

    Beating JSON performance with Protobuf https://auth0.com/blog/beating-json-performance-with-protobuf ...

  2. __init__ raises an exception, then __del__ will still be called

    issue 808164: socket.close() doesn't play well with __del__ - Python tracker https://bugs.python.org ...

  3. 深入理解SPI机制-服务发现机制

    https://www.jianshu.com/p/3a3edbcd8f24 SPI ,全称为 Service Provider Interface,是一种服务发现机制.它通过在ClassPath路径 ...

  4. Cisco交换机管理员配置

    conf tservice timestamps debug datetime msec localtime yearservice timestamps log datetime msec loca ...

  5. 静态代理和jdk动态代理

    要说动态代理,必须先聊聊静态代理. 静态代理 假设现在项目经理有一个需求:在项目现有所有类的方法前后打印日志. 你如何在不修改已有代码的前提下,完成这个需求? 我首先想到的是静态代理.具体做法是: 1 ...

  6. jvm系列一什么是jvm

    JVM学习 本博客是根据解密JVM[黑马程序员出品]教学视频学习时,所做的笔记 一.什么是JVM 定义 Java Virtual Machine,JAVA程序的运行环境(JAVA二进制字节码的运行环境 ...

  7. vue、element-ui 依权限动态导航 v-for、v-if

    在管理后台需要按用户权限展示不同导航菜单时,我们需要从后端请求数据来进行菜单渲染. 但由于v-for与v-if不能在同一标签内使用(存在性能问题:v-for 具有比 v-if 更高的优先级,意味着 v ...

  8. 查看文件MD5值

    Windows 打开命令窗口(Win+R),然后输入cmd ·输入命令certutil -hashfile 文件绝对路径 MD5 Linux MD5算法常常被用来验证网络文件传输的完整性,防止文件被人 ...

  9. Educational Codeforces Round 2 E. Lomsat gelral(dsu)

    题目链接 题意:给你一棵以1为根n个点的树,问你以i为根的子树的众数和是多少 思路:dsu是一种优化暴力的手段 首先进行轻重链剖分 然后只记录重链的信息 轻链的信息就直接暴力查找 经过证明这样复杂度可 ...

  10. hdu5432Rikka with Array (数位dp+十进制转化为二进制)

    Problem Description As we know, Rikka is poor at math. Yuta is worrying about this situation, so he ...