纯js实现复制内容到剪切板
下面的方法可以完美实现:
- 复制指定
input或者textarea中的内容; - 指定非输入框元素中的内容
代码如下:
function copyToClipboard(elem) {
// create hidden text element, if it doesn't already exist
var targetId = "_hiddenCopyText_";
var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
var origSelectionStart, origSelectionEnd;
if (isInput) {
// can just use the original source element for the selection and copy
target = elem;
origSelectionStart = elem.selectionStart;
origSelectionEnd = elem.selectionEnd;
} else {
// must use a temporary form element for the selection and copy
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;
}
// select the content
var currentFocus = document.activeElement;
target.focus();
target.setSelectionRange(0, target.value.length);
// copy the selection
var succeed;
try {
succeed = document.execCommand("copy");
} catch(e) {
succeed = false;
}
// restore original focus
if (currentFocus && typeof currentFocus.focus === "function") {
currentFocus.focus();
}
if (isInput) {
// restore prior selection
elem.setSelectionRange(origSelectionStart, origSelectionEnd);
} else {
// clear temporary content
target.textContent = "";
}
return succeed;
}
//我们可以这样直接调用这个方法:
//copyToClipboard(document.getElementById("name"));
代码来自:通过按钮直接把input或者textarea里的值复制到粘贴板里
纯js实现复制内容到剪切板的更多相关文章
- js实现复制内容到剪切板,兼容pc和手机端,支持Safari浏览器
Javascript原生有一些事件:copy.paste.cut, 这些事件可以作用的目标元素: 能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<bo ...
- Clipboard.js实现复制内容到剪切板
<script type="text/javascript"> var clipboard1 = new Clipboard('.bt01'); clipboard1. ...
- JS禁止右键查看源码,禁止复制,复制内容到剪切板
有时候我们希望自己的网页源码不被查看,这时需要关掉鼠标的右击事件;有时候我们也希望禁止选择页面内容Ctrl+C复制. 1.禁止右键查看源码; <script> //设置右键事件 funct ...
- javascript复制内容到剪切板/网页上的复制按钮的实现
javascript复制内容到剪切板/网页上的复制按钮的实现:DEMO如下 <!doctype html> <html> <head> <meta chars ...
- js复制内容到剪切板
注意第一部分的内容不兼容Safari,全兼容的请使用第二部分方法 第一部分 查看demo请点 这里. 原生js复制指定内容到剪切板,超简单的实现方式, 实现思路如下: 1.创建一个input,把想要 ...
- 简单实现兼容各大浏览器的js复制内容到剪切板
因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.set ...
- 在多浏览器使用JS复制内容到剪切板,无需插件
最近在学习DHTMLX,下载了一些JS源码,使用谷歌浏览器,在学习dhtmlxGrid部分进行复制表格内容时,发现,在线版的可以复制成功,而本地的不可以复制,报类似访问剪切板错误,经查找原因,原来是谷 ...
- js复制内容到剪切板,兼容pc和手机端,支持Safari浏览器
最近,一些项目中用到监听用户复制.剪切的操作. 案例1.在PC端,当用户获得一个京东卡的使用券,当用户使用ctrl + C复制得到的使用券时,将使用券的代号复制到粘贴板,以便于用户ctrl+v进行 ...
- 原生js 复制内容到剪切板
代码: function copyHandle(content){ let copy = (e)=>{ e.preventDefault() e.clipboardData.setData('t ...
随机推荐
- 时间序列算法理论及python实现(2-python实现)
如果你在寻找时间序列是什么?如何实现时间序列?那么请看这篇博客,将以通俗易懂的语言,全面的阐述时间序列及其python实现. 时间序列算法理论详见我的另一篇博客:时间序列算法理论及python实现 - ...
- NO.005-2018.02.10《南歌子词二首 / 新添声杨柳枝词》唐代:温庭筠
南歌子词二首 / 新添声杨柳枝词_古诗文网 南歌子词二首 / 新添声杨柳枝词 唐代:温庭筠(yún) 一尺深红胜曲尘,天生旧物不如新.(胜曲尘 一作:蒙曲尘)一袭深红色的长裙日子久了便蒙上了淡黄色,自 ...
- NodeJS服务器端平台实践记录
[2015 node.js learning notes]by lijun 01-note Nodejs是服务器端的javascript,是一种单线程.异步I/O.事件驱动型的javascript:其 ...
- bzoj 2179 FFT
求两个高精度的乘法. 根据高位低位,填入多项式的系数,求两个卷积,然后进位操作.
- shell小计
NF 是每行的字段数 (NF==8)标识每行有8个字段,当前记录中的字段个数,就是有多少列NR 是总共读取了多少行 (NR==2)第二行的意思,已经读出的记录数,就是行号,从 1 开始 awk简单使 ...
- 2018.9.30 Java中数组的存储与内存分配
java 数组与集合的区别 集合:长度可变,可以存放不同类型的元素,只能存放引用类型! 数组:长度固定,只可以存放相同的同种类型的元素,可以存放数据类型也可以存放引用类型! 数组定义的三种方式 // ...
- jsp的4个作用域区别( pageScope、requestScope、sessionScope、applicationScope)
简单描述 page里的变量没法从index.jsp传递到test.jsp.只要页面跳转了,它们就不见了. request里的变量可以跨越forward前后的两页.但是只要刷新页面,它们就重新计算了. ...
- Node.js 笔记01
一.Node.js 前言 1.node.js 之父 Ryan Dahl(瑞安达尔) ,技术好,颜值高! 数学系博士, 中途退学, 为了生活, 学习了Ruby On Rails接Web项目, 经过两年成 ...
- Git命令篇
前文: Git有三种状态,你的文件可能处于其中之一:已提交(committed),已修改(modiffied)和已暂存(staged) 三个工作区域概念:Git仓库.工作目录以及暂存区 Git保存信息 ...
- Python使用dict和set
dict Python内置了字典:dict的支持,dict全称dictionary,在其他语言中也成为map,使用键-值(key-value)存储,具有极快的查找速度. 假设要根据同学的名字查找对应的 ...