js点击按钮复制内容到粘贴板
复制内容到粘贴板,就是要选择需要复制的内容并执行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点击按钮复制内容到粘贴板的更多相关文章
- js实现复制内容到粘贴板
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- js插件实现点击复制内容到粘贴板,兼容IE8
先来看下本次需要导入的文件: 第一个是jquery.js,这个不多说: 第二个是jquery.zclip.js,第三个是zeroClipboard.swf ,这两个文件的下载链接:http://www ...
- jquery点击按钮复制内容
做移动端的项目遇到一个需求要点击按钮复制dom里的内容,看了很多资料显示必须textarea或者input里的内容才能简单复制,还有就是用插件的了,最终都因为遇到各种问题放弃,最终选择了最简单的点击复 ...
- js 实现页面点击按钮复制内容
前言: 我们平时在页面中是按照长按来实现复制相关的内容,那么怎么用js实现点击按钮实现复制相关的内容呢?请看如下方法: 实现步骤: 1.引入相关的js(ClipboardJS插件) <scrip ...
- js复制内容到粘贴板
点击右边内容:<span onclick="copyContent(this);" title="点击复制">啊,我被复制了</span> ...
- vue 复制内容到粘贴板
首先是npm安装依赖包:npm install clipboard --save 导入组件:import Clipboard from "clipboard"; html如图: c ...
- JS实现PC、Android、IOS端的点击按钮复制内容功能
直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- js 复制内容到粘贴板的兼容性
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs& ...
- vue中点击按钮复制内容
<el-button type="primary" round size="mini" @click="copyUrl">复制u ...
随机推荐
- 性能优化中CPU、内存、磁盘IO、网络性能的依赖
系统优化是一项复杂.繁琐.长期的工作,优化前需要监测.采集.测试.评估,优化后也需要测试.采集.评估.监测,而且是一个长期和持续的过程,不 是说现在优化了,测试了,以后就可以一劳永逸了,也不是说书本上 ...
- 秒杀功能压测 jmeter----------windows系统运行jmeter遇到的坑
最近做了一个安全传输模块,因为怕对性能有较大影响,因此测试安排了针对性的压测 压测的过程出现了一点小问题 发现失败率特别高,测试怀疑是服务端出了错,但是我查看日志发现没有报错.后面我观察TCP链接数排 ...
- 利用detours写了一个工具用于instrument任意指定dll的任意指定函数入口
目录 wiki Disas Dtest Simple withdll load一个dll到指定进程 tracebld显示相关进程涉及的文件读写操作 My Instrumentation tool: w ...
- Angularjs Select获取数组下标
一.定义资源 //资源类型 $scope.status=['项目测试','开发工具','安装包','工作计划','测试项目','我的游戏','我的音乐','博客首页图片']; 二.没错直接用 {{$ ...
- Ubuntu安装FreeSWITCH亲测
本人在安装FreeSWITCH的时候遇到了相当多的坑,网上很多方法都模棱两可,经常装失败,最后终于装成功后做一下总结 最顺利的安装方式 1. 下载压缩文件 下载地址:http://files.free ...
- [LeetCode] 6. ZigZag Converesion 之字型转换字符串
The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows like ...
- [LeetCode] 636. Exclusive Time of Functions 函数的独家时间
Given the running logs of n functions that are executed in a nonpreemptive single threaded CPU, find ...
- Jenkins - 参数化构建
1 - 设置 根据输入的参数来执行不同的构建过程. 参数TIME作为环境变量,可以被引用. 项目的首页会出现" Build with Parameters"功能链接,没有了&quo ...
- python json dumps datetime类型报错
# -*- coding: utf-8 -*- import json from datetime import date, datetime class MyEncoder(json.JSONEnc ...
- 使用ObjectARX 2012向导生成的自定义实体类无法捕捉的问题解决方式
使用ObjectARX 2012自定实体向导的时候,获取捕捉点的重写函数的向导中模板有点问题, C:\Program Files (x86)\Autodesk\ObjectARX 2019 Wizar ...