复制内容到粘贴板,就是要选择需要复制的内容并执行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. linux性能监控常用命令

    概述 我们在linux下,如果想要监控服务器性能.我们必须掌握以下常用的指标查看命令. ps pstree top free vmstat sar ps ps命令能给出当前系统中进程的快照.下面我们列 ...

  2. 刷题记录:[网鼎杯]Fakebook

    目录 刷题记录:[网鼎杯]Fakebook 一.涉及知识点 1.敏感文件泄露 2.sql注入 二.解题方法 刷题记录:[网鼎杯]Fakebook 题目复现链接:https://buuoj.cn/cha ...

  3. 【2019.09.19】数独(Sudoku)游戏之我见(软工实践第三次作业)

    Github项目地址:https://github.com/MokouTyan/suduku_131700101 [2019.09.20]更新:代码经过Code Quality Analysis工具的 ...

  4. Win10 LTSC 2019 长期支持版

    win 10 LTSB 2016 文件名:cn_windows_10_enterprise_2016_ltsb_x86_dvd_9057089.iso (2.62GB) 语言: Chinese – S ...

  5. <div> <p> <span>的用法和区别

    <div> 标签可以把文档分割为独立的.不同的部分.它可以用作严格的组织工具,并且不使用任何格式与其关联. 更重要的意义是在网页的动态实现过程中,对划分的区域统一处理,例如换背景色.字体等 ...

  6. SpringBoot @Autowired中注入静态方法或者静态变量

    注:用static去定义一个注入的方法或者配置文件值变量,编译时不会有任何异常,运行时会报空指针. Spring官方不推荐此种方法. 原理: https://www.cnblogs.com/chenf ...

  7. VS Code中配置python版本以及Python多版本

    VS Code中配置python版本VS Code十分方便配置python的版本:可以选在在本地setting.json或者全局setting.json文件中配置:python.pythonPath在 ...

  8. iOS - 点击按钮实现简单的复制功能

    UIPasteboard使用 基本使用: - (void)copyClick { UIPasteboard *pab = [UIPasteboard generalPasteboard]; pab.s ...

  9. [LeetCode] 288.Unique Word Abbreviation 独特的单词缩写

    An abbreviation of a word follows the form <first letter><number><last letter>. Be ...

  10. [LeetCode] 350. Intersection of Two Arrays II 两个数组相交II

    Given two arrays, write a function to compute their intersection. Example 1: Input: nums1 = [1,2,2,1 ...