复制内容到粘贴板,就是要选择需要复制的内容并执行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. Hive(一)—— 启动与基本使用

    一.基本概念 Hive用于解决海量结构化日志的数据统计问题. Hive是基于Hadoop的一个数据仓库工具.本质是将HQL(Hive的查询语言)转化成MapReduce程序. HIve处理的数据存储在 ...

  2. 银联高校极客挑战赛第一场 A.码队女朋友的王者之路[水题]

    目录 题目地址 题干 代码和解释 题目地址 计蒜客回顾比赛 码队女朋友的王者之路 题干 代码和解释 本题难度不大,但是一开始没有读懂题,以为净胜场次是确定的,没有"最高净胜场次"的 ...

  3. python 玩爬虫安装了一大堆第三方库

    之前就听说过爬虫,感觉很复杂的样子,但是看到python代码很简短.由于本机已经安装了python2.7 所以就拿来py 文件跑一下想看看效果. 结果各种代码错误.然后根据每个错误去下载对应的依赖项. ...

  4. Android中Activity的启动模式(LaunchMode)和使用场景

    一.为什么需要启动模式在Android开发中,我们都知道,在默认的情况下,如果我们启动的是同一个Activity的话,系统会创建多个实例并把它们一一放入任务栈中.当我们点击返回(back)键,这些Ac ...

  5. Python中的虚拟环境的使用

    1.安装virtualenv pip3 install virtualenv 2.创建目录 mkdir Myproject cd Myproject 3.创建独立运行环境-命名 virtualenv ...

  6. Mac下epub电子书制作编辑器 : Sigil

    官方博客:https://sigil-ebook.com github项目地址:https://github.com/Sigil-Ebook V0.9.10下载:https://github.com/ ...

  7. thinkphp5---join联合查询

    使用thinkphp3.2进行联合查询,join联合查询: $list = M('document as d') ->join('tp_admin_column as c on d.cid = ...

  8. centos7 docker swarm加入集群失败

    提示的错误为 [root@localhost downloads]# docker swarm join --token SWMTKN-1-2ezr0k5ybds1la4vgi2z7j8ykxkmm0 ...

  9. 爬虫urllib2库的基本使用

    所谓网页抓取,就是把URL地址中指定的网络资源从网络流中读取出来,保存到本地. 在Python中有很多库可以用来抓取网页,urllib2库基本使用. urllib2 是 Python2.7 自带的模块 ...

  10. 论文阅读:FaceBoxes: A CPU Real-time Face Detector with High Accuracy

    文章: <FaceBoxes: A CPU Real-time Face Detector with High Accuracy> Introduction 2个挑战: 1)在杂乱背景下人 ...