js 实现复制到粘贴板功能
前言：js 或者 jquery 都可以实现的复制到粘贴板功能，有时还想要有换行等格式（同 textarea）
网站地址：我的个人vue+element ui demo网站
github地址：yuleGH github (喜欢记得star哦)
demo
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <html> <head>
<title>测试</title>
</head> <body>
<button id="btn1">复制自定义内容到粘贴板</button> <br/>
框1
<textarea id="txt"></textarea> <br/>
<button id="btn2">复制框1内容到粘贴板</button> <br/>
框2
<textarea id="txt3"></textarea>
<button id="btn3">复制框1内容到框2，同时到粘贴板</button> <script type="text/javascript"> window.onload = function(){
function copyValue(val){
//如果这里换为 input 则不支持换行
var temp = document.createElement('textarea');
temp.value = val;
document.body.appendChild(temp);
temp.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
temp.style.display='none';
console.log('复制成功');
} document.getElementById("btn1").onclick = function () {
copyValue("1234\n复制成功了\n而且有换行的呢");
}; document.getElementById("btn2").onclick = function () {
copyValue(document.getElementById("txt").value);
}; function copyValue2(val){
var oInput = document.getElementById('txt3');
oInput.value = val;
oInput.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
console.log('复制成功');
}
document.getElementById("btn3").onclick = function () {
copyValue2(document.getElementById("txt").value);
};
}; </script>
</body> </html>
注意：如果需要支持换行则需要用 textarea
js 实现复制到粘贴板功能的更多相关文章
- zeroclipboard实现多浏览器复制到粘贴板功能
zeroclipboard实现多浏览器复制到粘贴板功能(单个复制按钮和多个复制按钮) 为了更好的用户体验,现在很多网站中文本框的内容只需要点击复制按钮这样就能把内容复制到粘贴板了:出于兼容性的考虑,基 ...
- Vue 实现复制到粘贴板功能
vue 实现复制到粘贴板功能需要依赖到 clipboard.js 1. 首先需要安装依赖 * 出现错误的话,可以试试 cnpm npm install --save vue-clipboard2 2 ...
- clipboardjs复制到粘贴板
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...
- 转JS--通过按钮直接把input或者textarea里的值复制到粘贴板里
document.activeElement属性为HTML 5中新增的document对象的一个属性,该属性用于返回光标所在元素.当光标未落在页面中任何元素内时,属性值返回body元素. setSel ...
- 【javascript】js实现复制、粘贴
使用document.ExecCommand("copy")命令,官方文档,点我. 例如: <!DOCTYPE html> <html> <head& ...
- javascript网页复制功能-复制到粘贴板-兼容多数浏览器(不使用flash)
使用方法:clipBordCopy("hello Copy");//执行后复制hello Copy到粘贴板 通过 var result = clipBordCopy("h ...
- AX 利用windows粘贴板功能实现批量数据快速导出EXCEL
static void test(Args _args) { int lineNum; int titleLines; SysExcelApplication excel; SysExcelWorkb ...
- JS原生编写实现留言板功能
实现这个留言板功能比较简单,所以先上效果图: 实现用户留言内容,留言具体时间. <script> window.onload = function(){ var oMessageBox = ...
- js复制到粘贴板
http://www.cnblogs.com/52fhy/p/5383813.html(移动端有兼容性问题) 要页面加载完直接绑定事件,否则第一次点击是绑定事件,第二次才触发事件 移动端需要设置tex ...
随机推荐
- Chrome浏览器插件开发－淘宝自动登录
浏览器插件的介绍 Chrome浏览器插件开发的准备工作 manifest.json配置介绍 页面如何注入scripts文件 一. 浏览器插件的介绍 浏览器插件是一种遵循一定规范的应用程序接口编写出来的 ...
- jzoj5710
對於每個詢問,我們先考慮插入1~r中每個數的答案,這樣子就不用考慮後面數對現在的影響 那麼我們可以在權值線段樹的每一個位置存儲每一個值最後一次結束的位置 問題變成了,如何判斷區間連續? 我們可以對線段 ...
- PARSER_JS_PRECISION_RANGE_EXCEEDED 错误
{ [Error: parseLengthCodedNumber: JS precision range exceeded, number is >= 53 bit: "3037620 ...
- zoj4019 Schrödinger's Knapsack（dp）
题意:有两种物品分别为n,m个,每种物品对应价值k1,k2.有一个容量为c的背包,每次将一个物品放入背包所获取的价值为k1/k2*放入物品后的剩余体积.求问所获取的最大价值. 整体来看,优先放入体积较 ...
- libevent源码剖析
libevent是一个使用C语言编写的,轻量级的开源高性能网络库,使用者很多,研究者也很多.由于代码简洁,设计思想简明巧妙,因此很适合用来学习,提升自己C语言的能力. libevent有这样显著地几个 ...
- ehcache 页面整体缓存和局部缓存
页面缓存是否有必要?. 这样说吧,几乎所有的网站的首页都是访问率最高的,而首页上的数据来源又是非常广泛的,大多数来自不同的对象,而且有可能来自不同的db ,所以给首页做缓存是很必要的.那么主页的缓存策 ...
- 修正eth0,解决虚拟机桥接问题
centos 中没有 ifcfg-eth0 配置文件的解决办法 1.也就是说是centos6改用NetworkManager方式管理网络了,可以运行如下命令进行确认: chkconfig --list ...
- Maven与Hudson集成
Hudson是一款优秀的持续集成产品,本文阐述Maven于Hudson的集成 Hudson的下载和安装 Hudson有两种安装模式,1:自运行(Hudson内建netty容器),2:放到如tomc ...
- SqlServer内存占用查看
查看每个数据库对内存的占用 SELECT ISNULL(DB_NAME(DATABASE_ID),'RESOURCEDB') AS DATABASENAME, ,)) AS 'SIZE(MB)' FR ...
- tensorflow初次接触记录，我用python写的tensorflow第一个模型
tensorflow初次接触记录,我用python写的tensorflow第一个模型 刚用python写的tensorflow机器学习代码,训练60000张手写文字图片,多层神经网络学习拟合17000 ...