php点击复制按钮到我的粘贴板,JS 实现点击按钮复制内容到粘贴板 clipboard
具体实现如下:
点击按钮复制内容到粘贴板
body {
text-align: center;
}
#p1 {
line-height: 150px;
font-size: 40px;
}
#source {
font-size: 18px;
}
.wrapper {
margin-top: 50px;
}
.btn {
width: 300px;
height: 120px;
background-color: #4da2fd;
color: #fff;
font-size: 20px;
text-decoration: none;
margin-top: 10px;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
#result {
width: 100%;
line-height: 30px;
color: #555;
font-size: 35px;
margin-top: 100px;
}
将要复制的内容
复制文本内容
复制网站链接
/**
* 方法1: 创建一个 input 标签,执行 input 的 select 方法,然后执行 document.execCommand("Copy") 实现复制
*
* 注意事项:
* - input 标签不能是 display: none; (使用定位把 input 定位到窗口之外)
* - 链接: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
*/
function copyText() {
var inputEle = document.createElement('input');
inputEle.style.position = 'fixed';
inputEle.style.left = '100000px';
// inputEle.value = document.getElementById("source").value;
inputEle.value = document.getElementById("p1").innerText;
document.body.append(inputEle);
inputEle.select();
var isSuccess = document.execCommand("copy");
document.getElementById('result').innerText = isSuccess ? "文字复制成功!" : "文字复制失败!";
document.body.removeChild(inputEle);
}
/**
* 方法2: 使用 clipboard.js, 具体用法看对应文档
*
* 注意事项:
* - clipboard.js 实现和方法1大体一样
* - 链接: https://github.com/zenorocha/clipboard.js/tree/2b48909ff1fb6da1378a3a6bc81a61a67f629dc2
*/
/**
* 方法3: 使用 navigator.clipboard.writeText 方法实现复制
*
* 注意事项:
* - 这种方法在浏览器 console 控制台直接调用会失败
* - 链接: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard
* - 链接: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText
*/
function copyLink() {
var siteUrl = window.location.href;
navigator.clipboard.writeText(siteUrl).then(function () {
/* clipboard successfully set */
document.getElementById('result').innerText = "网址复制成功!";
}, function () {
/* clipboard write failed */
document.getElementById('result').innerText = "网址复制失败!";
});
}
php点击复制按钮到我的粘贴板,JS 实现点击按钮复制内容到粘贴板 clipboard相关推荐
- html页面点击小图弹出大图代码,利用JS实现点击小图弹出大图代码
特效描述:利用JS实现 点击小图 弹出大图代码.利用JS实现点击小图弹出大图代码 代码结构 1. HTML代码 (function(){ var LightBox = function(options ...
- html 复制文本按钮,js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理分析 浏览器提供了 ...
- js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...
- html5点击复制文本框内容,js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理分析 浏览器提供了 ...
- Clipboard.js实现点击自动复制内容的功能
Clipboard.js实现点击自动复制内容的功能 点击非文本框,自动复制,代码如下 value:<spanid="bar"class="btn"data ...
- JQuery实现复制数据到剪贴板之各种麻花与右键点击弹出选择菜单
1.如果小伙伴们只是想实现点击某个按钮(通过click事件)实现复制功能. 那小哥哥我在这里推荐大家使用2个非常好用的插件 (1)clipboard.js:纯js插件,无需flash,相对来说更轻量级 ...
- 移动端js实现点击复制到剪贴板,【真正】兼容所有浏览器uc、qq、微信、手机自带等浏览器
查看demo 前言:在移动端上经常会遇到这样的需求,第一种就是点击复制当前页面的链接,第二种就是类似卡券的功能,需要复制密码等,之前需求太紧急,基本上都使用了clipboard.js ,使用方法也很简 ...
- 移动端js实现点击复制到剪贴板,【真正】兼容所有浏览器uc、qq、微信、手机自带等浏览器...
移动端js实现点击复制到剪贴板,带提示,[真正]兼容所有浏览器,包括安卓和ios及uc.qq.微信.手机自带等浏览器. github,欢迎star: https://github.com/majian ...
- jq点击按钮打开和关闭弹出层,点击除了当前按钮以外的地方关闭弹出层
1.html <a id="more" οnclick="moreFun()">更多</a> <ul id="moreL ...
最新文章
- 安装配置Statspack
- springmvc+mybatis+mysql+maven
- python字符串截取:截取yaml文件名后3个字符
- MySQL中的外键约束
- C++ 字符串(string类)
- java填充二维数组_Java用Arrays.fill()初始化二维数组的实现
- matlab安装好 启动总是闪退_在Ubuntu16.04下安装MATLAB2017b
- CSS3黑色大气绘图着陆页模板
- Objective-C 2.0 with Cocoa Foundation 1 前言
- 95-134-116-源码-维表-kafka维表关联:广播方式
- Hbase ImmutableBytesWritable数据类型
- spring5.3.x源码构建
- 【代码审计】YUNUCMS_v1.0.6 后台代码执行漏洞分析
- 认识IT圈的这些人 你的路将走的更顺利
- 动手写一个二叉平衡树
- 应用系统云原生架构衡量指标
- 极致CMS v1.7版本-一款完全开源,免授权商用,功能强大的PHP建站系统
- 特征选择与特征权重计算的区别
- MPlayer 音乐播放器项目讲解
- openlayers 地图源
热门文章
- 2022-2028年中国廉价航空行业深度调研及投资前景预测报告
- 2022-2028年中国水性密封胶行业市场调查研究及未来趋势预测报告
- 群晖共享文件夹局域网通过SMB本地访问
- 【UML建模】机房中的UML图
- sql移除数据中的换行符和回车符
- 快速访问github镜像 wiki镜像重点_github问题小结
- tensorflow op tf.global_variables_initializer
- python yield 和 return 对比分析
- DeepLabV3+语义分割实战
- CVPR2020论文点评: AdderNet(加法网络)