js实现复制到剪切板

1、第一种，通过clipboard.js插件实现（推荐）

此插件封装了很多种使用方式很方便，具体demo，可以去GitHub上看，clipboard传送门

2、第二种，纯js实现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CopyDemo</title>
</head>
<body><div id=NewsToolBox></div><div id="text-content">      <p>测试p1</p>      <p>测试p2</p>  </div><button id="copy-text-btn">复制</button>
</body>
</html>
<script type="text/javascript">// 复制全文document.getElementById("copy-text-btn").onclick=function(){var ssrsss =document.getElementById("text-content").innerText.replace(/\ +/g, ""); //获取文本并去掉空格var flag = copyText(ssrsss); //传递文本alert(flag ? '复制成功' : '复制失败')};function copyText(text) {var textarea = document.createElement("textarea"); //创建input对象var currentFocus = document.activeElement; //当前获得焦点的元素var toolBoxwrap = document.getElementById('NewsToolBox'); //将文本框插入到NewsToolBox这个之后toolBoxwrap.appendChild(textarea); //添加元素textarea.value = text;textarea.focus();if (textarea.setSelectionRange) {textarea.setSelectionRange(0, textarea.value.length); //获取光标起始位置到结束位置} else {textarea.select();}try {var flag = document.execCommand("copy"); //执行复制} catch (eo) {var flag = false;}toolBoxwrap.removeChild(textarea); //删除元素currentFocus.focus();return flag;}</script>

js实现复制到剪切板相关推荐

JS实现复制到剪切板效果
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 代码: <!DOCTYPE html> <html lang="en"& ...
clipboard.js 实现动态获取内容并复制到剪切板
一个按钮实现先ajax请求,再实现复制功能: 使用clipboard.js分为以下几个步骤: 1.引入一个clipboard.js的文件: 2.新建一个clipboard对象: 3.点击按钮获取目标对 ...
关于使用js复制到剪切板的兼容性写法
// 复制到剪切板 async function copyHandler(text) {try{if(navigator.clipboard && window.isSecureCon ...
html数据复制到剪切板
一.原生js指令复制 function copyUtil(info) {var $textArea = $('<textarea></textarea>');$textArea ...
微信小程序复制到剪切板及换行问题
wxml <textarea type="text" v-model="copyContent" placeholder="请输入内容" ...
将内容复制到剪切板兼容主流浏览器的解决方案
html : <body><div class="demo-area"><label for="copy-input">输入 ...
微信小程序之一键复制到剪切板
最近在开发小程序项目里遇到一个小难题-----一键复制在网页开发里我们可以引用大牛封装好的复制插件,比如无flash插件clipboard.js适用移动端,pc端------- 言归正装,打开微信 ...
Html将内容复制到剪切板.
Html将内容复制到剪切板. 引入clipboard.min.js /*!* clipboard.js v1.6.1* https://zenorocha.github.io/clipboard.js ...
JQ 实现复制到剪切板
JQ 实现复制功能 JQ 实现复制到剪切板使用JS 插件下载地址 clipboard.js 官网地址复制input输入框的值到剪切板 //HTML 代码 <input id="f ...

js实现复制到剪切板

js实现复制到剪切板相关推荐

最新文章

热门文章