js 实用封装 点击按钮复制到剪贴板
封装剪贴板:
function Copy(str) {
var save = function (e) {
//设置需要复制模板的内容
e.clipboardData.setData('text/plain',str);
//阻止默认行为
e.preventDefault();
}
// h5监听copy事件,调用save函数保存到模板中
document.addEventListener('copy',save);
// 调用右键复制功能
document.execCommand('copy');
//移除copy事件
document.removeEventListener('copy',save);
alert("复制成功");
}
点击调用函数
$('.CopeBorder').on('click',function () {
var CopeBorder=$(".CopeText").text();
// console.log(typeof CopeBorder)
Copy(CopeBorder);
})
js 实用封装 点击按钮复制到剪贴板的更多相关文章
- js 实现页面点击按钮复制内容
前言: 我们平时在页面中是按照长按来实现复制相关的内容,那么怎么用js实现点击按钮实现复制相关的内容呢?请看如下方法: 实现步骤: 1.引入相关的js(ClipboardJS插件) <scrip ...
- jquery点击按钮复制内容
做移动端的项目遇到一个需求要点击按钮复制dom里的内容,看了很多资料显示必须textarea或者input里的内容才能简单复制,还有就是用插件的了,最终都因为遇到各种问题放弃,最终选择了最简单的点击复 ...
- 原生 js 实现点击按钮复制文本
最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...
- 使用JS代码实现点击按钮下载文件
有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...
- CSS3和js炫酷点击按钮3D翻转动画特效
简要教程 flipside是一款使用CSS3和js制作的炫酷点击按钮无缝过渡到确认面板的过渡动画特效.该点击按钮特效在按钮不同方向的边部点击时,产生的过渡动画特效是不一样的. 在线预览 源码下载 ...
- iOS中点击按钮复制指定内容
话不多说,直接上图和代码:
- js实现点击按钮复制文本功能
最近项目活动中用到复制文本功能,发现在chrome中之前的clipboard的demo失效了,查了下发现是因为版本升级导致的.最新用法如下: <!DOCTYPE html> <htm ...
- JS实现PC、Android、IOS端的点击按钮复制内容功能
直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- JS复制文本到粘贴板,前端H5移动端点击按钮复制文本
<span id="codeNum">FTYHDSDW</span> <span class=" code-btn" id=&qu ...
随机推荐
- docker--image的获取
image有几种获取方式: 1.Docker官方提供了一种文件格式:Dockerfile,通过这种格式的文件,我们可以定义一个image,然后通过Dockerfile我们可以构建(build)一个im ...
- Tomcat发布项目的几种方式
如何在浏览器访问一个xml文件 拷贝这个文件到webapps/ROOT底下, 在浏览器里面访问 直接把tomcat/webapps/ROOT目录下 浏览器访问http://localhost:8080 ...
- C语言指向指针的指针
#include <stdio.h> int main() { /********************************************* * 指向指针的指针:指针变量存 ...
- vue 使用pug(详细说明)
1.安装pug npm i -D pug pug-html-loader pug-plain-loader cli2.0脚手架修改build/webpack.base.conf.js文件 module ...
- WPF textbox 鼠标滚动更新日期,text文本值更改
/// <summary> /// 选择日期 /// </summary> private void RQTxt_MouseWheel(object sender, Mouse ...
- 让Nginx路径中的子目录匹配文件夹的另一种写法
其实相当于对路径做一种通配符,根据路径名访问相应的文件夹.直接看高潮部分如下.. location /static { root /var/www/usmt; index index.html boa ...
- 解决windows10 安装不了.net 3.5问题
百度链接附上 详细操作参考使用说明 链接: https://pan.baidu.com/s/1vLXfuxP7qxujCFVB7xjxdg 提取码: seeu 如果还不能按照参考说明的安装 请直接在安 ...
- [转载]Ubuntu Server下配置UTF-8中文环境
转载自:http://www.gaojinbo.com/ubuntu-server%E4%B8%8B%E9%85%8D%E7%BD%AEutf-8%E4%B8%AD%E6%96%87%E7%8E%AF ...
- Fiddler,对数据进行抓包,拦截,修改等操作
转载....... 一.fiddler设置fiddler默认是只能抓取http网络格式的,所以我们要先设置下使fiddler可以获取到https网络格式 首先tools→options→https进去 ...
- PHP多参数方法的重构
假设我们要完成一个保存文章的功能,如果采用函数编程的方式,大概会是下面这个样子: <?php function saveArticle($title, $content, $categoryId ...