html5图片剪切板,Html5剪切板功能的实现方法
Html5剪切板功能的实现方法
发布时间:2020-10-23 16:45:29
来源:亿速云
阅读:68
作者:小新
这篇文章主要介绍了Html5剪切板功能的实现方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
最近使用Vue开发Line(日韩的一款类似中国微信平台)的内嵌H5.里面的有一个需求就是将当前链接粘贴,然后发送到pc端,在电脑上进行打开。所有搜集找到了一下几种情况:
1.不带input输入框的原生js方法
这种情况适用于复制非输入框中的文本到剪切板
被复制的内容
点击复制
(function(){
button.addEventListener('click', function(){
var copyDom = document.querySelector('#content');
//创建选中范围
var range = document.createRange();
range.selectNode(copyDom);
//移除剪切板中内容
window.getSelection().removeAllRanges();
//添加新的内容到剪切板
window.getSelection().addRange(range);
//复制
var successful = document.execCommand('copy');
try{
var msg = successful ? "successful" : "failed";
alert('Copy command was : ' + msg);
} catch(err){
alert('Oops , unable to copy!');
}
})
})()
2.带输入框的原生js方法
用于复制input,textarea中的文本
复制输入框中内容
(function(){
button.addEventListener('click', function(){
input.select();
document.execCommand('copy');
alert('复制成功');
})
})()
这种方法也可以进行延深,充当和方法1一样的用途。动态创建一个input输入框,将其内容置为想复制的内容,最后在将其移除或者隐藏即可。
3.js复制内容到剪贴板插件(clipboard.js)
clipboard.js官网
clipboard.js CDN地址
引用方式:
NPM npm install --save clipboardCDN
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function (e) {
console.log(e);
});
clipboard.on('error', function (e) {
console.log(e);
});
里面还有很多高级用法,可以前往官网逻辑更多细节 Clipboard官网
4. Vue框架提供的剪切板插件 vue-clipboard2import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
VueClipboard.config.autoSetContainer = true // add this line
Vue.use(VueClipboard)
Sample1
v-clipboard:copy="message"
v-clipboard:success="onCopy"
v-clipboard:error="onError">Copy!
new Vue({
el: '#app',
template: '#t',
data: function () {
return {
message: 'Copy These Text'
}
},
methods: {
onCopy: function (e) {
alert('You just copied: ' + e.text)
},
onError: function (e) {
alert('Failed to copy texts')
}
}
})
Sample2
Copy!
new Vue({
el: '#app',
template: '#t',
data: function () {
return {
message: 'Copy These Text'
}
},
methods: {
doCopy: function () {
this.$copyText(this.message).then(function (e) {
alert('Copied')
console.log(e)
}, function (e) {
alert('Can not copy')
console.log(e)
})
}
}
})
感谢你能够认真阅读完这篇文章,希望小编分享Html5剪切板功能的实现方法内容对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,遇到问题就找亿速云,详细的解决方法等着你来学习!
html5图片剪切板,Html5剪切板功能的实现方法相关推荐
- 3d布局图 html5,8个实用炫酷的HTML5图片动画应用 | HTML5资源教程
近期我们发布了不少关于 1.CSS3/jQuery实现移动端滑动图片层叠效果 这是一款基于jQuery和CSS3的图片层叠插件,这和我们之前介绍的CSS3图片层叠展开特效有点不同,它支持鼠标滑动切换图 ...
- html5图片灰度显示,HTML5 组件Canvas实现图像灰度化
HTML5发布已经有很长一段时间了,一直以来从来没有仔细的看过,过年刚来随便看看 发现HTML5中的Canvas组件功能是如此的强大,不怪很多牛人预言Flash已死,死不死 不是我要关心的,我关心的C ...
- html5图片区域剪切,HTML5 本地裁剪图片并上传至服务器(老梗)
很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的.但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 ...
- 帝国html5图片站模板,html5响应式自适应帝国CMS整站模板源码瀑布流文章图片资讯文章站...
版本更新 模板已经适配到最新帝国CMS7.5(部分早期源码模板没有适配到最新)!截止2019-持续追踪更新针对机房黑产利用,和帝国CMS一个XS漏洞利用方法的堵截!正式版已补,请已运营的小伙伴找我查看 ...
- html5图片本地缓存,HTML5: 本地缓存
HTML5 提供了两种在client存储数据的新对象: localStorage:没有时间限制的数据存储,在同一个浏览器中,仅仅要没被手动清理,第二天.第二周或下一年之后,数据依旧可用. sessio ...
- html5 图片文字提取,HTML5 Canvas:获取canvas内容-toDataURL()
我们可以通过canvas的toDataURL()方法来获取绘制在HTML5 canvas中的内容.做法类似下面的示例代码: var canvas = document.getElementById(& ...
- html5图片看不见,html5 绘制图片 drawImage
要在绘图上下文中绘制图片,可以使用 drawImage 方法.该方法有三种不同 的参数: drawImage(image,dx,dy) drawImage(image,dx,dy,dw,dh) ...
- html5图片上写字,Html5 canvas画图教程20:在canvas里写字
文章写到现在才发现我忘了介绍在canvas上写字的方法,呃,这篇补上. 其实在canvas里写字是很简单的,他有两个原生方法,即strokeText(描边文字)和fillText(填充文字)--一看就 ...
- html5 图片局部马赛克,html5 canvas 图片打马赛克 demo
Canvas Mosaic #pic{ display:none; } The size of the original pic need to be 360 pixs. canvas 标签 var ...
- html5 图片抽奖代码,html5实现九宫格抽奖可固定抽中某项奖品
原生js写的一个九宫格抽奖程序 (周末在家闲着也是闲着) 我写的这个抽奖是拿来整蛊我女朋友, 因为每次抽奖的结果都是同一个.. 哈哈哈哈哈哈哈哈哈哈哈哈哈 我会附上正常抽奖的的代码和固定只能抽到某一个 ...
最新文章
- jQuery动态操作表单
- 004_FastDFS分布式添加多个tracker
- 单片机彩灯移动实验_单片机课程设计彩灯实验.doc
- 使用kuberbuilder创建工程示例
- Git之深入解析如何交互式暂存
- 姚班天才少年鬲融凭非凸优化研究成果获得斯隆研究奖
- server接收dtu透传代码_Gopher2020大会干货总结:代码技巧篇
- C++基础总结(4)-----指针
- Eclipse导入包的快捷键
- Go Node.js 生成的exe公布成windows服务
- POI多个Sheet生成Excel
- 【第115期】世界一流大学计算机专业,都在用哪些书当教材?
- 蓝桥杯:翻转旋转变换(矩阵旋转)
- SQL查询,子查询作为结果字段
- 计算机u盘设备无法启动不了怎么办,u盘无法启动提示错误代码10该怎么处理
- 如何处理Java异常及常见异常
- 蚂蚁集团强化与阿里隔离:马云不再是实际控制人;iPhone 15 Pro将独占6大功能;Linux 4.9正式EOL|极客头条
- 如何练习打字/盲打(作者的感想与建议)
- 消息队列系统Kafka_01
- uniapp 小程序车牌号输入键盘