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. Flink可靠性的基石-checkpoint机制详细解析

    Checkpoint介绍 checkpoint机制是Flink可靠性的基石,可以保证Flink集群在某个算子因为某些原因(如 异常退出)出现故障时,能够将整个应用流图的状态恢复到故障之前的某一状态,保 ...

  2. mysql(视图 事务 索引 外键)

    视图   视图本质就是对查询的封装   创建视图(定义视图 起名以v_开头) create view v_students as select classes.name as c_name ,stud ...

  3. vue的nuxt框架中使用vue-video-player

    一.基本需求:使用nuxt框架,需要在移动端网页中播放视频.  二.文中解决的基本问题:      1.vue-video-player在nuxt中怎么使用.      2.由于为了适配移动端,使用了 ...

  4. Docker逃逸

    初识Docker逃逸 - FreeBuf网络安全行业门户 https://www.freebuf.com/articles/container/242763.html

  5. new() 和 make() 的区别 var arr1 = new([5]int) var arr2 [5]int

    Effective Go - The Go Programming Language https://golang.org/doc/effective_go.html#allocation_new A ...

  6. 这几个小技巧,让你书写不一样的Vue!

    前言 最近一直在阅读Vue的源码,发现了几个实战中用得上的小技巧,下面跟大家分享一下. 同时也可以阅读我之前写的Vue文章 vue开发中的"骚操作" 挖掘隐藏在源码中的Vue技巧! ...

  7. Python 中 sorted 如何自定义比较逻辑

    在 Python 中对一个可迭代对象进行排序是很常见的一个操作,一般会用到 sorted() 函数 num_list = [4, 2, 8, -9, 1, -3] sorted_num_list = ...

  8. Java——集合框架之Set&HashSet,HashMap,泛型,compareTo

    Set Set接口--数据存放无序,非常简单,主要呈现信息列表 Set接口存储一组唯一.无序的对象 HashSet是Set接口常用的实现类 Set接口不存在get方法 Iterator接口:表示对集合 ...

  9. EasyUI框架

    使用EasyUI框架时,需要导入3个包在项目js文件夹之中. 在项目之中,每次需先引入相关文件: <!--引入jquery--> <script src="../js/jq ...

  10. Redis,JedisPool工具类

    Redis,JedisPool工具类 1.JedisPool 详细配置解释代码 2.Jedis工具类 导入相关依赖: commons-pool2-2.3.jar jedis-2.7.0.jar 1.J ...