jQuery实现复制到粘贴板功能
项目中突然需要使用复制功能,在网上搜索了下看到了ZeroClipboard插件,好用,但是也有局限。用法如下:
1、引用jquery、zclip.js、swf文件。
demo地址:https://github.com/chaoli920029342/jquery_copy
2、初始化
<body> <input type="text" name="text" id="text" value="http://www.baidu.com" /> <a href="javascript:void(0)" rel="external nofollow" id="dynamic">复制</a> <script type="text/javascript"> $(document).ready(function(){ $("#dynamic").zclip({ path:'ZeroClipboard.swf', copy:$('#text').val(), beforeCopy:function(){ //some code }, afterCopy:function(){ alert($("#text").val()); } }); //beforeCopy afterCopy 是可选项 }); </script> </body>
注:
1、需在服务器上运行 localhost
2、js+swf实现,文件需要同时引入。 ZeroClipboard提供一个透明的flash,用于和剪切版交互,当点击页面上的“复制”按钮时,将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板。 需保证该flash被正确加载即可。
3、可兼容各大浏览器
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
jquery.zclip轻量级复制失效问题
工作原理 利用一个透明的 Flash ,让其漂浮在按钮之上,这样其实点击的不是按钮而是 Flash ,也就可以使用 Flash 的复制功能了 <script src="js/jquery/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="js/jquery-zclip/jquery.zclip.js"></script&g
-
jQuery zclip插件实现跨浏览器复制功能
jQuery-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题.jQuery-zclip插件需要Flash的支持,使用时记得安装Adobe Flash Player. 1.jQuery-zclip用法 //引入jQuery-zclip相关js及swf文件 <script type="text/javascript" src="<%=path%>/resources/js/jquery.min.js&q
-
JQuery zClip插件实现复制页面内容到剪贴板
相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 最终效果: 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是用的透明flash遮挡"复制到剪贴板"按钮,所以当你点击"复制到剪贴板"的时候,点击的其实是flash,然后把你需要复制的内容传入到了flash,然后在通过flash的复制功能把传入的内容复制到了剪贴板. 加载JQuery库和zclip插件 <scri
-
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制,然后用户可以粘贴到想粘贴的地方. HTML 首先需要在页面中载入jquery库和zclip插件,这两个文件已经打好包,欢迎点击下载. <script type="text/javascript" src="js/jquery.js"></script&
-
jquery使用jquery.zclip插件复制对象的实例教程
复制代码 代码如下: <script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/jquery.zclip.min.js"></script> 复制代码 代码如下: $(function(){ $('#copy_input').zclip(
-
jQuery实现复制到粘贴板功能
项目中突然需要使用复制功能,在网上搜索了下看到了ZeroClipboard插件,好用,但是也有局限.用法如下: 1.引用jquery.zclip.js.swf文件. demo地址:https://github.com/chaoli920029342/jquery_copy 2.初始化 <body> <input type="text" name="text" id="text" value="http://www.ba
-
Golang中生成随机字符串并复制到粘贴板的方法
前段时间在生活中偶尔需要对某些文件进行重命名,而且是随机名字,刚 开始是手动重命名然后在键盘上胡乱打一些字母数字,时间长了发现也挺麻烦的,于是想到能不能用golang实现这个功能并且自动把生成的字符串 复制到粘贴板,然后生成exe文件,要用的是直接鼠标双击就行.说干就干. 网上搜了些相关资料,于是写了出来. 安装必要的库 go get github.com/atotto/clipboard 代码实现 package main import ( "fmt" "github.co
-
VB实现屏蔽文本框右键菜单的复制、粘贴等功能的方法
本文实例讲述了VB屏蔽文本框中的右键菜单.复制.粘贴等功能的实现方法.该功能就是禁止文本框的右键功能,造成点击鼠标右键无效.是非常常见的一类实用功能. 具体的功能模块代码如下: '========================================================== '| 模 块 名 | TextBoxDisableAbility '| 说 明 | 禁止文本框的功能 '=================================================
-
js实现点击图片将图片地址复制到粘贴板的方法
本文实例讲述了js实现点击图片将图片地址复制到粘贴板的方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
-
vue实现点击复制到粘贴板
本文实例为大家分享了vue实现点击复制到粘贴板的具体代码,供大家参考,具体内容如下 背景: 业务开发中遇到,点击复制内容到粘贴板的需求,记录一下 效果: 关键代码: copyText() { const oInput = document.createElement('input') oInput.value = this.textarea document.body.appendChild(oInput) oInput.select()
-
js 实现复制到粘贴板的功能代码
他主要有两个参数:第一个是设置要复制的是一段文本,第二个参数是要复制具体的内容,这个内容可以从文本框中或使用innerHTML获取. 简单的实例代码: 复制代码 代码如下: <script type="text/javascript"> function copyData() { var copyText = document.getElementById("ctl00_cpRight_txtUrl").value; window.clipboardDa
-
vue 实现复制内容到粘贴板clipboard的方法
1 . npm安装到项目目录文件中 npm install clipboard --save 2 . import 引入文件 import Clipboard from 'clipboard'; 3 . 在需要html元素中的自定义属性中data-clipboard-text 中写入要复制的内容 <button class="copyBtn" :data-clipboard-text = "https://www.baidu.com/" type="
-
JavaScript实现复制内容到粘贴板代码
最近做了一个前端项目,其中有需求:通过button直接把input或者textarea里的值复制到粘贴板里.下面小编把我实现思路及代码分享给大家,大家可以直接引入项目中. 具体代码如下所示: function copyToClipboard(elem) { // create hidden text element, if it doesn't already exist var targetId = "_hiddenCopyText_"; var isInput = elem.tag
-
Web js实现复制文本到粘贴板
本文实例为大家分享了Web js实现复制文本到粘贴板的具体代码,供大家参考,具体内容如下 一.简述 记--简单用js实现将元素的文本内容复制到粘贴板. 二.效果 三.代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>js复制内容到粘贴板</title> <script type="text/j
-
CMD里或登陆远程linux服务器时命令行下复制和粘贴实现方法
如果要在CMD中复制的话,必须通过鼠标. 复制:要先标记(在CMD中击鼠标右键)要复制的内容(或者称是范围),然后鼠标点击右键或按回车(或Ctrl+C)即可复制完成. 粘贴:击右键粘贴即可把复制到粘贴板上的内容粘贴到CMD中. putty登陆远程大型机 复制:双击选中或鼠标拖动选中要复制的内容 粘贴:点右键直接粘贴 Xshell登陆远程大型机 复制:光标选中要复制的内容,按Ctrl+Insert 粘贴:Shift+Insert
随机推荐
- photoshop制作网站流程图解
- ASP.NET中实现jQuery Validation-Engine的Ajax验证实现代码
- JavaScript格式化日期时间的方法和自定义格式化函数示例
- asp.net开发微信公众平台之获取用户消息并处理
- 用PHP代替JS玩转DOM的思路及示例代码
- C# Winform 让整个窗口都可以拖动
- linux下讲解MySQL安装与登录方法
- Android 中自定义ContentProvider与ContentObserver的使用简单实例
- jsonp原理及使用
- asp动态include文件,方便多模板的实现
- Android编程实现获得内存剩余大小与总大小的方法
- sqlserver实现树形结构递归查询(无限极分类)的方法
- jQuery事件绑定方法学习总结(推荐)
- PHP版 汉字转码的实现详解
- 常见系统进程列表第1/2页
- innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
- 使用Vue中 v-for循环列表控制按钮隐藏显示功能
- NodeJS有难度的面试题(能答对几个)
- python实现栅栏加解密 支持密钥加密
- JAVA的LIST接口的REMOVE重载方法调用原理解析