js 实现复制粘贴
js 实现复制粘贴
<!DOCTYPE html> <html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>点击复制内容移动端全兼容(专治各种移动端浏览器)</title>
<style>
*{
margin:0;
padding:0;
}
body{
background: #fff;
}
button{
width:100px;
height:45px;
}
</style>
</head>
<body>
<button id="copy">点击复制</button>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
/**
* [点击复制内容移动端全兼容(专治各种移动端浏览器)]
* @author majiang by beijing
* @createtime 2018-11-17
* @blog http://www.love85g.com
*/
;(function($) {
var defaults = {
imgUrl: "",
text: "复制成功",
copyUrl: "",
tipTime: 2000,
copyId: ""
};
$.extend({
copy: function(option) {
var options = $.extend({}, defaults, option);
var URL = options.copyUrl == "" ? window.location.href.split('#')[0] : options.copyUrl;
var cId = options.copyId == "" ? '#copy' : options.copyId;
var IMG = options.imgUrl == "" ? "" : '<img style="width: 22px;" src="' + options.imgUrl + '">';
var tipsHtml = '<div id="share-tips" style="position: fixed;top: 50%;left:50%;background: rgba(0,0,0,.5);border-radius: 4px;margin: 0 auto;color: #fff;z-index: 9999;padding: 5px 10px;font-size: 14px;text-align: center;transform: translate(-50%,-50%);">' + IMG + '<p>' + options.text + '</p></div>';
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
var aEle = document.querySelectorAll(cId);
if (isAndroid || (!isAndroid && !isiOS)) {
$(aEle).each(function() {
var index = $(this).attr("id").split("y")[1];
$('body').append('<textarea id="selector' + index + '" style="position:absolute;top:-9999px;left:-9999px;" readonly>' + URL + '</textarea>');
$(this)[0].onclick = function(event) {
$("#selector" + index).select();
document.execCommand("copy", false, null);
$("body").append(tipsHtml);
setTimeout(function() {
$("#share-tips").remove()
}, options.tipTime)
}
})
}
if (isiOS) {
$(aEle).each(function() {
var index = $(this).attr("id").split("y")[1];
$('body').append('<a id="selector' + index + '" style="position:absolute;top:-9999px;left:-9999px;">' + URL + '</a>');
this.addEventListener('click', function() {
var copyDOM = document.querySelectorAll('#selector' + index);
var range = document.createRange();
range.selectNode(copyDOM[0]);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand('copy');
$("body").append(tipsHtml);
setTimeout(function() {
$("#share-tips").remove()
}, options.tipTime)
}, false)
})
}
}
})
}
)(jQuery); </script>
<script>
$.copy({
imgUrl:"success-tips.png", //分享图标地址
text:"复制成功", //分享提示文案
copyUrl:"复制成功", //自定义复制链接地址
tipTime:2000, //分享提示消失时间
copyId:"#copy"//复制按钮id
}); </script> </body>
</html>
js 实现复制粘贴的更多相关文章
- js 实现复制粘贴文本过滤（保留文字和图片）
实现复制粘贴文本过滤(保留文字和图片) demo如下: <head> <meta http-equiv="Content-Type" content=" ...
- 通过如何通过js实现复制粘贴功能
在ie中window.clipboardData(剪切板对象)是可以被获取,所以利用这个方法我们可以实现在IE当中复制粘贴的功能,demo如下! <html> <head> & ...
- js实现复制粘贴功能
在项目中使用到复制粘贴功能,虽然网上有很多大牛封装了很多的插件,但是还是想不去使用插件,就像自己来实现这个功能. 另一篇是禁止复制粘贴 前端er怎样操作剪切复制以及禁止复制+破解等 初步想法: 1. ...
- 在html页面通过js实现复制粘贴功能
前言:要实现这个功能,常用的方式大概分为两类,第一种就是上插件,这个网上有大把,第二种就是直接用几行JS来实现. 这次说第二种实现方式,这方式有很大的局限性,只能用表单元素,并且不能设置disable ...
- JS ----实现复制粘贴功能 (剪切板应用clipboardData)
注意:ie7,与ie8 对网页有个复制的权限,需在“安全”中的“自定义级别”的脚本中设置 clipboardData 对象 提供了对剪贴板的访问. 三个方法 :1.clearData(sDataFor ...
- js实现复制粘贴
项目中经常会遇到点击按钮复制订单号.订单id等内容到粘贴板中的需求.可是通常我们都是用Ctrl + c或右击复制的,别操心,js也是有复制命令的,那就是document.execCommand('co ...
- [JavaScript] 怎么使用JS禁止复制粘贴
1. 将彻底屏蔽鼠标右键,其实是禁止快捷菜单,因为不光右键可以弹出这个菜单,键盘上空格键右边的windows键也可以激活这个快捷菜单 <table border oncontextmenu=re ...
- js 实现复制粘贴时注意方法中需要两次点击实现的bug
方法一:利用ZeroClipboard 详见 :http://www.jb51.net/article/22403.htm 1先引入 <script type="text/javasc ...
- js禁止复制粘贴
1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键,其实是禁止快捷菜单,因为不光右键可以弹出这个菜单,键盘上空格 ...
随机推荐
- RCNN,Fast RCNN,Faster RCNN 的前生今世：（4） Fast RCNN 算法详解
继2014年的RCNN之后,Ross Girshick在15年推出Fast RCNN,构思精巧,流程更为紧凑,大幅提升了目标检测的速度.在Github上提供了源码. 同样使用最大规模的网络,Fast ...
- JDK、JRE、JVM之间的关系及JDK安装
JRE (Java Runtime Environment) :是Java程序的运行时环境,包含 JVM 和运行时所需要的 核心类库 .JDK (Java Development Kit):是Java ...
- python字符串、字符串处理函数及字符串相关操作
python字符串.字符串处理函数及字符串相关操作 字符串介绍 python字符串表示 Python除处理数字外还可以处理字符串,字符串用单撇号或双撇号包裹: >>> 'spam e ...
- Postgresql 进程和内存结构
在本章中,总结了PostgreSQL中的流程体系结构和内存体系结构,以帮助阅读后续章节.如果您已经熟悉它们,可以跳过本章 1.进程结构 Postgresql 是一个C/S架构的关系型数据库,由多个后台 ...
- Kubernetes 学习11 kubernetes ingress及ingress controller
一.上集回顾 1.Service 3种模型:userspace,iptables,ipvs 2.Service类型 ClusterIP,NodePort NodePort:client -> N ...
- C利用可变参数列表统计一组数的平均值，利用函数形式参数栈原理实现指针运算
//描述:利用可变参数列表统计一组数的平均值 #include <stdarg.h> #include <stdio.h> float average(int num, ... ...
- golang-切片copy
package main import ( "fmt" ) func main() { fmt.Println("-------------") data := ...
- 9.本地线程(ThreadLoca)
ThreadLoca 提高一个线程的局部变量,访问某个线程都有自己的局部变量,当使用ThreadLoca为每个使用该变量的线程提供独立的变量副本,所以每一个线程都可以独立的改变自己的副本,二不会影响到 ...
- 小程序中怎么引入wepy.js第三方toast组件
1.先安装组件 npm install wepy-com-toast --save 2.引入wepy和toast import wepy from 'wepy' import Toast from ' ...
- svn更新，清理，上传时出现乱码解决方案
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_35703883/articl ...