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. CMOS 摄像头的Skipping 和 Binning 模式

    在通常的摄像头中,不同的resolution对应不同的帧率.想要提高帧率就要考虑是否需要缩小视野(FOV).若不希望视野缩小,就需要减少resolution. 常用的减少resolution的两种方式 ...

  2. (08)-Python3之--类和对象

    1.定义 类:类是抽象的,一类事物的共性的体现.  有共性的属性和行为. 对象:具体化,实例化.有具体的属性值,有具体做的行为. 一个类 对应N多个对象. 类包含属性以及方法. class 类名: 属 ...

  3. vfd-cloud——一个适合练习上手的云存储网盘springboot项目(开发中)

    vfd-cloud           ​ 一个基于SpringBoot的云存储网盘项目,适合练手学习SpringBoot,用到的技术栈列到了下面.支持用户的注册登陆及修改密码,利用邮箱进行验证.支持 ...

  4. Mapper查询技巧

    Sql字段动态比较判断 <sql id="getUserInfoList_body"> SELECT * from userinfo <dynamic prepe ...

  5. 最简单直接地理解Java软件设计原则之开闭原则

    写在前面 本文属于Java软件设计原则系列文章的其中一篇,后续会继续分享其他的原则.想以最简单的方式,最直观的demo去彻底理解设计原则.文章属于个人整理.也欢迎大家提出不同的想法. 首先是一些理论性 ...

  6. python 百分比的计算打印

    在做压测的时候常常需要统计测试成功率,简单的例子如下: count = 89i = 100print("測試次數:%d"%count)print("測試成功率:%.2f% ...

  7. scala的隐式转换学习总结(详细)

    一,隐式转换函数 1, 格式, implicit def 函数名(参数):返回值类型={ //函数体 //返回值 } 2,例子: //导入对应的规则类,以免出现警告 scala> import ...

  8. Kubernetes --(k8s)yml 文件

    认识yml文件 yaml文件语法 大小写敏感 使用缩进表示层级关系 缩进时不允许使用Tab键,只允许使用空格. 缩进的空格数目不重要,只要相同层级的元素左侧对齐即可 # 表示注释,从这个字符一直到行尾 ...

  9. Codeforces Round #638 (Div. 2)

    Contest Info Practice Link Solved A B C D E F 4/6 O O Ø  Ø     O 在比赛中通过 Ø 赛后通过 ! 尝试了但是失败了 - 没有尝试 Sol ...

  10. Codeforces Round #648 (Div. 2) A. Matrix Game

    题目链接:https://codeforces.com/contest/1365/problem/A 题意 给出一个 $n \times m$ 的网格,两人轮流选择一个所在行列没有 $1$ 的方块置为 ...