复制内容到粘贴板,就是要选择需要复制的内容并执行document.execCommand("copy")命令:

//复制内容到粘贴板
function copyToClipboard(elemId) {
var target = document.getElementById(elemId);
// 选择内容
target.focus();
target.setSelectionRange(0, target.value.length);
// 复制内容
var succeed;
try {
succeed = document.execCommand("copy");
} catch (e) {
succeed = false;
}
console.log("复制成功");
return succeed;
}

如果应用场景复杂些,可能有多种元素(textarea、input、div等)需要复制内容,可以写一个通用方法:

//复制内容到粘贴板
function copyToClipboard(elemId) {
var elem = document.getElementById(elemId);
var targetId = "_hiddenCopyText_";
var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
var origSelectionStart, origSelectionEnd;
if (isInput) {
// 复制选择内容
target = elem;
origSelectionStart = elem.selectionStart;
origSelectionEnd = elem.selectionEnd;
} else {
// 必须有一个临时的元素存储复制的内容
target = document.getElementById(targetId);
if (!target) {
var target = document.createElement("textarea");
target.style.position = "absolute";
target.style.left = "-9999px";
target.style.top = "0";
target.id = targetId;
document.body.appendChild(target);
}
target.textContent = elem.textContent;
}
// 选择内容
var currentFocus = document.activeElement;
target.focus();
target.setSelectionRange(0, target.value.length);
// 复制内容
var succeed;
try {
succeed = document.execCommand("copy");
} catch (e) {
succeed = false;
}
// 恢复焦点
if (currentFocus && typeof currentFocus.focus === "function") {
currentFocus.focus();
}
if (isInput) {
// 恢复之前的选择
elem.setSelectionRange(origSelectionStart, origSelectionEnd);
} else {
// 清除临时内容
target.textContent = "";
}
console.log("复制成功");
return succeed;
}

js点击按钮复制内容到粘贴板的更多相关文章

  1. js实现复制内容到粘贴板

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. js插件实现点击复制内容到粘贴板,兼容IE8

    先来看下本次需要导入的文件: 第一个是jquery.js,这个不多说: 第二个是jquery.zclip.js,第三个是zeroClipboard.swf ,这两个文件的下载链接:http://www ...

  3. jquery点击按钮复制内容

    做移动端的项目遇到一个需求要点击按钮复制dom里的内容,看了很多资料显示必须textarea或者input里的内容才能简单复制,还有就是用插件的了,最终都因为遇到各种问题放弃,最终选择了最简单的点击复 ...

  4. js 实现页面点击按钮复制内容

    前言: 我们平时在页面中是按照长按来实现复制相关的内容,那么怎么用js实现点击按钮实现复制相关的内容呢?请看如下方法: 实现步骤: 1.引入相关的js(ClipboardJS插件) <scrip ...

  5. js复制内容到粘贴板

    点击右边内容:<span onclick="copyContent(this);" title="点击复制">啊,我被复制了</span> ...

  6. vue 复制内容到粘贴板

    首先是npm安装依赖包:npm install clipboard --save 导入组件:import Clipboard from "clipboard"; html如图: c ...

  7. JS实现PC、Android、IOS端的点击按钮复制内容功能

    直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  8. js 复制内容到粘贴板的兼容性

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs& ...

  9. vue中点击按钮复制内容

    <el-button type="primary" round size="mini" @click="copyUrl">复制u ...

随机推荐

  1. 【2019】Charles视频教程,接口测试工具最新教程

    Charles 是在 windows/mac/linux下常用的网络封包截取工具,也是电商/直播/搜索/金融/H5/App等测试专用接口测试工具. Charles 支持Http/Https/Webso ...

  2. python复合数据类型以及英文词频统计

    这个作业的要求来自于:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2753. 1.列表,元组,字典,集合分别如何增删改查及遍历. 列 ...

  3. [Beta]第十次 Scrum Meeting

    [Beta]第十次 Scrum Meeting 写在前面 会议时间 会议时长 会议地点 2019/5/20 22:00 20min 大运村公寓6F寝室 附Github仓库:WEDO 例会照片 工作情况 ...

  4. Use of Time-series Based Forecasting Technique for Balancing Load and Reducing Consumption of Energy in a Cloud Data Center

    年份:2017 摘要: 由于工作负载分配不均,一些服务器变得过载,而另一些服务器仍处于欠载状态. 为了实现负载平衡,需要从过度使用的节点迁移一些虚拟机. 但是与此不同的是,本文提出了一种负载预测算法, ...

  5. 针对nginx,来具体聊聊正向代理与反向代理 (转载)

    https://www.sohu.com/a/235704408_468627 先来说说什么是代理服务器? 所谓代理服务器就是位于发起请求的客户端与原始服务器端之间的一台跳板服务器,正向代理可以隐藏客 ...

  6. word 转 pdf,c#代码

    通过使用 C# 控制 office 软件 com 组件转 pdf 1 word 转 pdf 方案二:可以使用 netoffice 进行转换 参考文档:https://netoffice.io/docu ...

  7. 基于Wiremock创建Mock Service平台(转)

    本文链接:https://blog.csdn.net/liuchunming033/article/details/52399397                                   ...

  8. Photoshop如何自定义形状

    Photoshop如何自定义形状,自定义形状定义一次,可以随便使用,而且形状无大小,填充后不会有像素问题,普通人可把常用的自定义成形状,很方便.PS中有一些自定义的形状,自己可以随便使用,但是不是很全 ...

  9. CentOS的vsftp修改默认配置路径方法

    修改ftp的根目录只要修改/etc/vsftpd/vsftpd.conf文件即可: 加入如下几行: local_root=/var/www/htmlchroot_local_user=YESanon_ ...

  10. mysql杂项

    取数据库某个表中的所有的字段 select COLUMN_NAME from information_schema.COLUMNS where table_name = 'your_table_nam ...