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 ...
随机推荐
- Android Studio无法连接真机的问题？
我不说,你可能又浪费半天时间,最后的结果,你可能还是没能解决!!! 现在,一般安卓手机为了安装软件方便,一般都安装了豌豆荚,但是,就是这个豌豆荚占用了Android Studio的ADB端口,导致An ...
- Code Chef GEOCHEAT（凸包+旋转卡壳+随机化）
题面 传送门 题解 以下记\(S_i=\{1,2,3,...,i\}\) 我们先用凸包+旋转卡壳求出直径的长度,并记直径的两个端点为\(i,j\)(如果有多条直径随机取两个端点) 因为这个序列被\(r ...
- js代码上的优化
例1 if ( config.url === '/web/teacher/classes' || config.url === '/web/teacher/students || config.u ...
- HttpClient调用IdentityServer4获取Token并调用接口
using System; using System.Net.Http; using IdentityModel.Client; namespace ClientCredential { class ...
- 聊聊jvm系列
http://blog.csdn.net/column/details/talk-about-jvm.html
- Hibernate之mappedBy与@JoinColumn
@JoinColumn所在实体是关系拥有方,name即拥有方对应表到参考表的外键名称. @mappedBy所在实体是关系的被拥有方,value值owner中表示被拥有类的属性. 在单向关系中不需要设置 ...
- function参数
expr_without_variable { Z_LVAL($$.u.constant) = ; zend_do_pass_param(&$, ZEND_SEND_VAL, Z_LVAL($ ...
- android权限permission大全(权限提醒)
1.Android.permission.WRITE_USER_DICTIONARY允许应用程序向用户词典中写入新词 2.android.permission.WRITE_SYNC_SETTINGS写 ...
- 剑指offer二十七之字符串的排列
一.题目 输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba. 二.思路 我们 ...
- (转)Linux中的位图
原文:https://www.jianshu.com/p/74626c2d2916 什么是位图 位图(bitmap)的定义 维基百科中关于位图的介绍: 一种数据结构,代表了有限域中的稠集(dense ...