html5 获取剪切板内容,H5剪切板功能
最近使用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)
引用方式:
NPM npm install --save clipboard
CDN
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-clipboard2
import 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 获取剪切板内容,H5剪切板功能相关推荐
- 剪切板是计算机系统,必备的高效小工具Ditto轻松记录复制剪切板内容-win7剪切板...
win10系统虽然自带有剪切板功能,但是非常不好用,或者有些其它系统的网友想使用剪切板记录功能,今天恰鹿导航就推荐一个体积小而且免费的剪切板软件Ditto, Ditto是标准Windows剪贴板的扩展 ...
- Android 10 获取剪切板内容
一般可以放在Activity的onResume中调用如下方法: //获取剪切板内容 private void getClipboardData() {this.getWindow().getDecor ...
- 各系统剪切板内容获取
最近在做UI自动化,出现点击按钮复制文案到剪切板的操作,由于执行机器有mac.win10.liunx,出现不同的兼容问题,简单记录一下 1.常用获取方式 Python xerox模块 import x ...
- html5读取剪切板 内容,实践笔记:js解析剪切板里的excel内容
这次记录的是昨晚一个想法:把excel内容复制到剪切板并转成自己想要的json格式,核心是要把excel内容转json,这部分主要看excel的格式和json如何业务的映射,不展开.倒是通过实践,收获 ...
- h5页面调用用户手机打电话功能以及复制内容到剪切板
通过配合vant的面板组件实现该功能: 在index.html中添加meta标签:<meta name="format-detection" content="te ...
- python获取剪切板图片_python 获取剪切板内容的两种方法
第一种 # -*- coding: utf-8 -*- # @Time : 2020/3/16 21:26 # @File : get_text_from_cupboard_13.py # @Auth ...
- js获取剪切板内容(企业微信内嵌网页)
js获取剪切板内容 应用场景 剪切板内容获取 腾讯会议获取会议时间.会议链接和会议号 更新========================= 企业微信页面剪切板内容读取 iPhone无法进入页面 零宽 ...
- PyQt5 技术篇-在clipboard.dataChanged.connect()里如何写入剪切板示例演示,pyqt5监听剪切板变动并写入剪切板内容
PyQt5 自带的写入剪切板方法在 clipboard.dataChanged.connect() 里不生效,主要是为了避免死循环. 不过利用其它的写入剪切板方法放在里面就不会有影响了,比如 pype ...
- html复制文字兼容手机,JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)...
新学习JavaScript,就碰到这么一个需求,几乎网上的方法都试过了.写出了总结下 使用的方法:clipboard 插件下载地址:https://github.com/zenorocha/clipb ...
- html5 js 手机剪切板,JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)...
新学习JavaScript,就碰到这么一个需求,几乎网上的方法都试过了.写出了总结下 使用的方法:clipboard 插件下载地址:https://github.com/zenorocha/clipb ...
最新文章
- Django中html里的分页显示
- centos 6.5下编译安装、配置高性能服务器Nginx
- matlab抖g是什么,MATLAB中dither抖动函数的用法
- 浅析 Bash 中的 {花括号} | Linux 中国
- java共同方法_java-现有公共方法的NoSuchMethodError
- hbase 源代码解析(2)HAdmin 的表创建过程
- 实对称矩阵的特征值求法_旋转之三 - 旋转矩阵
- java8 新特性之 -- lamdba 表达式 -- Optional类 --遍历 Map List
- 微软易升级服务器,通过“微软Windows10易升”升级Win10 1803全程图解
- 使你的程序支持多GPU渲染
- 最新中国数据中心排行榜
- docker容器怎么设置开机启动
- 【BUG】unresolvable R_ARM_THM_CALL relocation against symbol `strlen'
- 响铃:滴滴“资源向安全和客服体系倾斜”的不完全建议
- ipa包脱壳、解析、info.plist文件基本信息介绍
- 【官方】中国工商银行电子银行业务收费标准
- 备份oracle数据库
- 《电子测量与仪器学报》杂志投稿总结
- SwapNet 和 VITON-GAN
- LOAM中消除IMU重力影响解析