复制内容到粘贴板,就是要选择需要复制的内容并执行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软工实践_Alpha(事后诸葛亮)

    组长博客 感谢组长 总结思考 设想和目标 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 弥补Powerpoint中模板转换存在的缺陷,完善PPT模板一键转换的功能 ...

  2. react项目如何运行

    react项目如何运行 一.总结 一句话总结: npm i 安装好package.json的 指定插件后,npm start 启动项目 二.react项目的安装与运行 转自或参考:react项目的安装 ...

  3. Android相关属性的介绍:android:exported = true

    在Activity中该属性用来标示:当前Activity是否可以被另一个Application的组件启动:true允许被启动:false不允许被启动. android:exported 是Androi ...

  4. PHP系列 | ThinkPHP5数据库迁移工具 migration

    了解更多,请关注微信公众号 ThinkPHP5数据库迁移工具 migration 什么是Migration? migration用谷歌翻译是移民的意思,在PHP中我们将它理解为迁移,将Migratio ...

  5. 压测引起的 nginx报错 502 no live upstreams while connecting to upstream解决

    对系统的某个接口进行极限压测,随着并发量上升,nginx开始出现502 no live upstreams while connecting to upstream的报错,维持最大并发量一段时间,发现 ...

  6. arcgis python脚本工具实例教程—栅格范围提取至多边形要素类

    arcgis python脚本工具实例教程-栅格范围提取至多边形要素类 商务合作,科技咨询,版权转让:向日葵,135-4855_4328,xiexiaokui#qq.com 功能:提取栅格数据的范围, ...

  7. hibernate的load和get有什么作用

    ① load方法认为该数据在数据库中一定存在,可以放心的使用代理来延迟加载,如果在使用过程中发现了问题,只能抛异常(ObjectNotFoundException)load方法加载实体对象的时候,根据 ...

  8. [LeetCode] 727. Minimum Window Subsequence 最小窗口子序列

    Given strings S and T, find the minimum (contiguous) substring W of S, so that T is a subsequenceof  ...

  9. NLP理解层次 --- 思维导图

  10. vue-cli3 element 分页组件el-pagination的基本使用

    <!--分页组件--> <el-pagination :total="total" :current-page="currentPage" : ...