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 ...
随机推荐
- 简单版nginx lua 完成流量上报于中间件
本文链接:https://www.cnblogs.com/zhenghongxin/p/9131226.html 公司某些业务下,需要将请求的流量上报于中间件(kafka,rabbitMq等),让st ...
- hdoj1435 Stable Match（稳定婚姻问题）
简单稳定婚姻问题. 题目描述不够全面,当距离相同时容量大的优先选择. 稳定婚姻问题不存在无解情况. #include<iostream> #include<cstring> # ...
- Elasticsearch地理位置总结
更多内容请参考 : https://www.felayman.com 翻译版本:https://es.xiaoleilu.com/310_Geopoints/00_Intro.html 官方原文:ht ...
- collectd+influxdb+grafana
今天一天都在弄这个,最终发现在配置grafana的时候选择influxdb的版本时候选错了.(挠头~~~!!!) collectd的配置还算简单,基本看过配置文件就比较清楚. influxdb(Go ...
- HTML5技术要点
HTML5技术要点 1.HTML5视频 <!DOCTYPE HTML> <html> <body> <video src="/i/movie.ogg ...
- POJ 1046
#include<iostream> using namespace std; #define MAXN 16 #define inf 100000000 struct node { in ...
- linux 中 iptables关于ping的问题
允许其他机器ping通防火墙 iptables -A INPUT -p icmp --icmp-type echo-request -j ACCEPT iptables -A OUTPUT -p ic ...
- 前后端分离最佳实现，使用Nuxt.js快速搭建单页SSR应用
通常我们搭建ssr应用需要自己选择多个组件集成到一起 webpack babel loaders router server-render 各种入口配置等 如果是基于vue+vuex+vue-rout ...
- Redis查询&JDBC查询&Hibernate查询方式的效率比较...
比较三种查询方式查询效率对比...我是用的JavaWeb的方式通过通过JSP页面查询的填写查询的参数...给予反馈.... 整个demo的下载地址:http://files.cnblogs.com/f ...
- (转)python高级:列表解析和生成表达式
一.语法糖的概念 “糖”,可以理解为简单.简洁,“语法糖”使我们可以更加简洁.快速的实现这些功能. 只是Python解释器会把这些特定格式的语法翻译成原本那样复杂的代码逻辑 我们使用的语法糖有: if ...