js复制内容到剪切板
注意第一部分的内容不兼容Safari,全兼容的请使用第二部分方法
第一部分
查看demo请点 这里。
原生js复制指定内容到剪切板,超简单的实现方式,
实现思路如下:
1.创建一个input,把想要复制的内容赋值到input的value上;
2. 把这个input插入到body内;
3.获取这个input,对它执行选中;
4.执行documen的copy事件;
5,删除刚刚插入的input。
代码如下:
html:
<button id="btn">复制</button>
js:
// 复制的方法
function copyText(text, callback){ // text: 要复制的内容, callback: 回调
var tag = document.createElement('input');
tag.setAttribute('id', 'cp_hgz_input');
tag.value = text;
document.getElementsByTagName('body')[0].appendChild(tag);
document.getElementById('cp_hgz_input').select();
document.execCommand('copy');
document.getElementById('cp_hgz_input').remove();
if(callback) {callback(text)}
} // 点击按钮调用复制
document.getElementById('btn').onclick = function (){
copyText( '123456', function (){console.log('复制成功')})
}
直接复制下来看效果的:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body> <button id="btn">复制</button> <script type="text/javascript"> // 复制的方法
function copyText(text, callback){ // text: 要复制的内容, callback: 回调
var tag = document.createElement('input');
tag.setAttribute('id', 'cp_hgz_input');
tag.value = text;
document.getElementsByTagName('body')[0].appendChild(tag);
document.getElementById('cp_hgz_input').select();
document.execCommand('copy');
document.getElementById('cp_hgz_input').remove();
if(callback) {callback(text)}
} // 点击按钮调用复制
document.getElementById('btn').onclick = function (){
copyText( '123456', function (){console.log('复制成功')})
} </script>
</body>
</html>
第二部分
使用这个:https://github.com/zenorocha/clipboard.js
引入这个插件的js,
使用方法,去看他的demo吧, 拜拜!
(完)
js复制内容到剪切板的更多相关文章
- 在多浏览器使用JS复制内容到剪切板,无需插件
最近在学习DHTMLX,下载了一些JS源码,使用谷歌浏览器,在学习dhtmlxGrid部分进行复制表格内容时,发现,在线版的可以复制成功,而本地的不可以复制,报类似访问剪切板错误,经查找原因,原来是谷 ...
- 简单实现兼容各大浏览器的js复制内容到剪切板
因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.set ...
- js复制内容到剪切板,兼容pc和手机端,支持Safari浏览器
最近,一些项目中用到监听用户复制.剪切的操作. 案例1.在PC端,当用户获得一个京东卡的使用券,当用户使用ctrl + C复制得到的使用券时,将使用券的代号复制到粘贴板,以便于用户ctrl+v进行 ...
- 原生js 复制内容到剪切板
代码: function copyHandle(content){ let copy = (e)=>{ e.preventDefault() e.clipboardData.setData('t ...
- js 复制内容到剪切板
function oCopy(objname){//只兼容IE var obj = $(objname); obj.select(); js=obj.createTextRange(); js.exe ...
- JS禁止右键查看源码,禁止复制,复制内容到剪切板
有时候我们希望自己的网页源码不被查看,这时需要关掉鼠标的右击事件;有时候我们也希望禁止选择页面内容Ctrl+C复制. 1.禁止右键查看源码; <script> //设置右键事件 funct ...
- javascript复制内容到剪切板/网页上的复制按钮的实现
javascript复制内容到剪切板/网页上的复制按钮的实现:DEMO如下 <!doctype html> <html> <head> <meta chars ...
- js实现复制内容到剪切板,兼容pc和手机端,支持Safari浏览器
Javascript原生有一些事件:copy.paste.cut, 这些事件可以作用的目标元素: 能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<bo ...
- 兼容安卓和ios实现一键复制内容到剪切板
实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...
随机推荐
- JavaScript验证时间格式
1. 短时间,形如 (13:04:06) function isTime(str) { var a = str.match(/^(\d{1,2})(:)?(\d{1,2})\2(\d{1,2})$/) ...
- msil 笔记
public class TestImpl : ITest { // Properties public string Address { get { return "abc"; ...
- SpringBoot日记——SpringMvc自动配置与扩展篇
为了让SpringBoot保持对SpringMVC的全面支持和扩展,而且还要维持SpringBoot不写xml配置的优势,我们需要添加一些简单的配置类即可实现: 通常我们使用的最多的注解是: @Bea ...
- SpringMVC 完美解决PUT请求参数绑定问题(普通表单和文件表单)
一 解决方案 修改web.xml配置文件 将下面配置拷贝进去(在原有的web-app节点里面配置 其它配置不变) <!-- 处理PUT提交参数(只对基础表单生效) --> <filt ...
- webgl绘制粗线段
webgl1不支持设置线段宽度,这就只好通过shader来实现了,参考了踏得网的例子,引用地址:http://wow.techbrood.com/fiddle/43140.先在此感谢踏得网创始人之一 ...
- canvas反向裁剪技巧
我们都知道在canvas 可以通过clip来实现剪裁功能,其步骤一般是先设置要裁剪的区域(路径),然后通过ctx.clip()的实现裁剪,裁剪之后,后续的绘制只能在裁剪的区域显示效果,比如如下一段代码 ...
- elementUI实现前端分页
按照他的文档来写分页,最主要的是el-table里面展示的数据怎么处理 <el-table :data="AllCommodityList.slice((currentPage-1)* ...
- MySQL两种引擎的比较
MyISAM,InnoDB主要区别: 1.MyISAM是非事物安全的,InnoDB是事物安全的. 事物安全的特点为更安全,遇到问题会自动恢复或从备份加事物日志回复,如果更新失败,你的所有改变都变回原来 ...
- virtual box下安装ubuntu经验
1. 哪怕下载的是ubuntu64位版本,也在vitualbox下选择ubuntu而不要选择ubuntu(64bit) 2. 安装VBoxGuestAdditional.iso:下载和vbox版本相匹 ...
- Hadoop错误码速查
经常遇到的exception是:PipeMapRed.waitOutputThreads(): subprocess failed with code N "OS error code 1: ...