js 实现复制到粘贴板功能

前言：js 或者 jquery 都可以实现的复制到粘贴板功能，有时还想要有换行等格式（同 textarea）

github地址：yuleGH github (喜欢记得star哦)

js 实现复制到粘贴板功能

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 ...

随机推荐

NSOperation的几种使用方式
1.NSInvocationOperation 创建NSInvocationOperation对象 - (id)initWithTarget:(id)target selector:(SEL)sel ...
mysql使用索引优化查询效率
索引的概念索引是一种特殊的文件(InnoDB数据表上的索引是表空间的一个组成部分),它们包含着对数据表里所有记录的引用指针.更通俗的说,数据库索引好比是一本书前面的目录,能加快数据库的查询速度.在没 ...
【Python】Django Model 怎么使用 UUID 作为主键？
>>> import uuidprint uuid.uuid3(uuid.uuid1(), 'python.org') >>> # make a UUID base ...
C&num; winform 若要在加载设计器前避免可能发生的数据丢失，必须纠正以下错误
winform中有时添加了新控件之后编译会报错: 若要在加载设计器前避免可能发生的数据丢失,必须纠正以下错误,如图: 解决方案: 1.“解决方案”→“批生成”→“清理”→“确定”: 2.“解决方案”→ ...
题目1434：今年暑假不AC （项目安排类：结束时间快排，判断开始时间）
题目描述: “今年暑假不AC?”“是的.”“那你干什么呢?”“看世界杯呀,笨蛋!”“@#$%^&*%...”确实如此,世界杯来了,球迷的节日也来了,估计很多ACMer也会抛开电脑,奔向电视作为 ...
OpenTSDB案例总结
加宽行可增加扫描速度采用组合rowkey,利用数据本地性加快扫描少数宽行,并不比多数窄行节省空间缩短Column family 和 column的名字合并若干列.
【翻译】Ext JS最新技巧
原文:Top Support Tips Mitchell Simoens:控制滚动指示器的自动隐藏 Sencha Touch有一个跨平台的,在所有平台看起来和工作效果都一样的滚动条.两条轴(x和y,水 ...
为什么分库分表使用2的N次方一个字节用两位16进制
你说说为神马表的总数.redis库的总数.HashMap的数量最好是2的N次方数据在表库HashMap 落地时候都会跟总数取模,这个我们做个测试假设数量是2的3次方就是8,即索引就是0-7 php ...
在IDEA中spring程序可以正常运行，但IDE报错Could not autowire&period;
这个问题只会在使用xml文件配置bean时遇到,使用自动配置和java配置没有这种错误. 遇到这个问题首先要确定配置文件已经正确的放在了resources文件夹内,resources文件夹就是clas ...
css3 &commat;keyframes用法
使用@keyframes规则,可以创建动画. 在动画的过程中,可以多次更改css样式的设定. 对于指定的变化:发生时用0%,或关键字“from”和“to”,这与0%和100%相同. 0%:开头动画. ...