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 ...
随机推荐
- File System Object（FSO对象）A
FSO对象模型包含在Scripting 类型库 (Scrrun.Dll)中,它同时包含了Drive.Folder.File.FileSystemObject和TextStream五个对象: 1.Dri ...
- 使用electron开发一个h5的客户端应用创建http服务模拟后台接口mock
使用electron开发一个h5的客户端应用创建http服务模拟后端接口mock 在上一篇<electron快速开始>里讲述了如何快速的开始一个electron的应用程序,既然electr ...
- WebGL——osg框架学习三
今天继续来Draw绘制的osg模块的学习,昨天我们学习的是StateBin渲染状态树节点类,今天我们来继续学习下一个Draw的基础类DrawableEntity渲染对象实体类.这个类和Drawable ...
- 前端常见算法面试题之 - 重建二叉树[JavaScript解法]
题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列[1,2,4,7,3,5,6,8],和中序遍历序列[4,7 ...
- Linux系统中时间区域和API
1.问题 在开发云平台程序的时候,经常会碰到时间区域转换的问题.比如,任何网络存储的文档的metadata都自己记录了编辑时间.但是,云平台记录时需要把这个时间转成标准时间,便于管理.但是用户使用的时 ...
- 在python脚本中设置环境变量，并运行相关应用
1. 问题 在自动化应用的时候 ,有时候环境变量与运行需要不一致.这时候有两种选择: 改变节点环境变量,使得其和运行需求保持一致: 在自动化脚本中设置环境变量,其范围只在脚本运行环境中有效. 显然,当 ...
- linux执行命令返回码释义
Linux 操作系统错误代码解释 0.错误代码1-10 OS error code 0: Success 操作系统错误代码0:成功 OS error code 1: Operation not per ...
- Spring入门学习笔记（2）——基于Java的配置
目录 基于Java的配置 @Configuration & @Bean Annotations Example 注入Bean依赖 @Import注解 Lifecycle Callbacks(声 ...
- 高可用OpenStack（Queen版）集群-3.高可用配置(pacemaker&haproxy)
参考文档: Install-guide:https://docs.openstack.org/install-guide/ OpenStack High Availability Guide:http ...
- sqli-labs学习笔记 DAY4
DAY 4 sqli-labs lesson 23 与lesson 1一样,只不过屏蔽了#和–注释符. 报错型注入: 爆库:id=99' UNION SELECT 1,extractvalue(1,c ...