Js操作剪切板

最新推荐文章于 2024-05-11 10:22:17 发布
最新推荐文章于 2024-05-11 10:22:17 发布
阅读量2.3k 收藏
点赞数
文章标签： javascript 数据结构与算法 git ViewUI
原文链接：http://www.cnblogs.com/melodi/p/5241659.html
版权

由于要在页面实现一个点击复制的功能，总结一下实现方法

方法一：原生js实现

    Var text = document.getElementById("text")

    window.clipboardDate.setData("Text",text);

    缺点：只支持IE.不支持ff,chrome,edge

    优点：原生js,如果能实现兼容所有的浏览器的方法，那就是完美的

方法二：jquery.zclip

    先说优缺点：

    优点：兼容firefox,chrome,ie,edge

    缺点：利用flash技术（flash估计马上要完了）

    Git: https://github.com/patricklodder/jquery-zclip

  1. jquery(zclip依赖jquery)
  2. 在页面引入js文件jquery.zclip.js
  3. 将ZeroClipboard.swf加入到项目中

     

    操作事例：

    <div id="invite"> https://github.com/patricklodder/jquery-zclip</div>

    <div id="copy">点击复制</dib>

function bind_copy(){

    $("#copy").zclip({

path:"<%=path%>/ZeroClipboard.swf",

copy:function(){

     return $("#invite").text();

},

     beforeCopy:function(){

    //…….

}

afterCopy:function(){

var copy = document.getElementById("copy");

copy.innerHTML = "已复制成功";

copy.style.color="red";

}

});

}

    注意事项：可以将绑定事件z.clip绑定在$(document).ready()中，但是如果你的id=copy(如上例)处于display:none;的状态，将不会复制成功：

原因可以看jquery.zclip.js代码（标红）：

/*

* zClip :: jQuery ZeroClipboard v1.1.5

* Originally forked from: http://steamdev.com/zclip

*

* Copyright 2011, SteamDev

*

* Released under the MIT license.

* https://github.com/patricklodder/jquery-zclip/blob/master/LICENSE

*/

 

(function (jQuery) {

 

jQuery.fn.zclip = function (params) {

 

if (typeof params == "object" && !params.length) {

 

var settings = jQuery.extend({}, ZeroClipboard.defaults, params);

 

return this.each(function () {

 

var o = jQuery(this);

 

if (o.is(':visible') && (typeof settings.copy == 'string' || jQuery.isFunction(settings.copy))) {

 

ZeroClipboard.setMoviePath(settings.path);

var clip = new ZeroClipboard.Client();

 

if (jQuery.isFunction(settings.copy)) {

o.bind('zClip_copy', settings.copy);

}

 

if (jQuery.isFunction(settings.beforeCopy)) {

o.bind('zClip_beforeCopy', settings.beforeCopy);

}

 

if (jQuery.isFunction(settings.afterCopy)) {

o.bind('zClip_afterCopy', settings.afterCopy);

}

 

clip.setHandCursor(settings.setHandCursor);

 

clip.setCSSEffects(settings.setCSSEffects);

 

clip.addEventListener('mouseOver', function (client) {

o.trigger('mouseenter');

});

 

clip.addEventListener('mouseOut', function (client) {

o.trigger('mouseleave');

});

 

clip.addEventListener('mouseDown', function (client) {

 

o.trigger('mousedown');

 

if (jQuery.isFunction(settings.beforeCopy)) {

o.trigger('zClip_beforeCopy');

}

 

if (!jQuery.isFunction(settings.copy)) {

clip.setText(settings.copy);

} else {

clip.setText(o.triggerHandler('zClip_copy'));

}

 

});

 

clip.addEventListener('complete', function (client, text) {

 

if (jQuery.isFunction(settings.afterCopy)) {

 

o.trigger('zClip_afterCopy');

 

} else {

if (text.length > 500) {

text = text.substr(0, 500) + "...\n\n(" + (text.length - 500) + " characters not shown)";

}

 

o.removeClass('hover');

alert("Copied text to clipboard:\n\n " + text);

}

 

if (settings.clickAfter) {

o.trigger('click');

}

 

});

 

clip.glue(o[0], o.parent()[0]);

 

jQuery(window).bind('load resize', function () {clip.reposition();});

 

}

 

});

 

} else if (typeof params == "string") {

 

return this.each(function () {

 

var o = jQuery(this);

 

params = params.toLowerCase();

var zclipId = o.data('zclipId');

var clipElm = jQuery('#' + zclipId + '.zclip');

var clientId = clipElm.attr('id').replace(/^.*_/g, '') || null;

 

if (params == "remove") {

 

clipElm.remove();

o.removeClass('active hover');

o.unbind('zClip_copy');

o.unbind('zClip_beforeCopy');

o.unbind('zClip_afterCopy');

ZeroClipboard.unregister(clientId);

 

} else if (params == "hide") {

 

clipElm.hide();

o.removeClass('active hover');

 

} else if (params == "show") {

 

clipElm.show();

 

}

 

});

 

}

 

};

 

})(jQuery);

 

// ZeroClipboard

// Simple Set Clipboard System

// Author: Joseph Huckaby

var ZeroClipboard = {

 

version: "1.0.7",

clients: {},

// registered upload clients on page, indexed by id

moviePath: 'ZeroClipboard.swf',

// URL to movie

nextId: 1,

// ID of next movie

 

defaults: {

path: 'ZeroClipboard.swf',

clickAfter: true,

setHandCursor: true,

setCSSEffects: true,

 

copy: null,

// a string or function that returns string

 

beforeCopy: null,

afterCopy: null

},

 

jQuery: function (thingy) {

// simple DOM lookup utility function

if (typeof(thingy) == 'string') thingy = document.getElementById(thingy);

if (!thingy.addClass) {

// extend element with a few useful methods

thingy.hide = function () {

this.style.display = 'none';

};

thingy.show = function () {

this.style.display = '';

};

thingy.addClass = function (name) {

this.removeClass(name);

this.className += ' ' + name;

};

thingy.removeClass = function (name) {

var classes = this.className.split(/\s+/);

var idx = -1;

for (var k = 0; k < classes.length; k++) {

if (classes[k] == name) {

idx = k;

k = classes.length;

}

}

if (idx > -1) {

classes.splice(idx, 1);

this.className = classes.join(' ');

}

return this;

};

thingy.hasClass = function (name) {

return !!this.className.match(new RegExp("\\s*" + name + "\\s*"));

};

}

return thingy;

},

 

setMoviePath: function (path) {

// set path to ZeroClipboard.swf

this.moviePath = path;

},

 

dispatch: function (id, eventName, args) {

// receive event from flash movie, send to client

var client = this.clients[id];

if (client) {

client.receiveEvent(eventName, args);

}

},

 

register: function (id, client) {

// register new client to receive events

this.clients[id] = client;

},

 

unregister: function (id) {

if (typeof(id) === 'number' && this.clients.hasOwnProperty(id)) {

delete this.clients[id];

}

},

 

getDOMObjectPosition: function (obj, stopObj) {

// get absolute coordinates for dom element

var info = {

left: 0,

top: 0,

width: obj.width ? obj.width : obj.offsetWidth,

height: obj.height ? obj.height : obj.offsetHeight

};

 

if (obj && (obj != stopObj)) {

info.left += obj.offsetLeft;

info.top += obj.offsetTop;

}

 

return info;

},

 

Client: function (elem) {

// constructor for new simple upload client

this.handlers = {};

 

// unique ID

this.id = ZeroClipboard.nextId++;

this.movieId = 'ZeroClipboardMovie_' + this.id;

 

// register client with singleton to receive flash events

ZeroClipboard.register(this.id, this);

 

// create movie

if (elem) this.glue(elem);

}

};

 

ZeroClipboard.Client.prototype = {

 

id: 0,

// unique ID for us

ready: false,

// whether movie is ready to receive events or not

movie: null,

// reference to movie object

clipText: '',

// text to copy to clipboard

handCursorEnabled: true,

// whether to show hand cursor, or default pointer cursor

cssEffects: true,

// enable CSS mouse effects on dom container

handlers: null,

// user event handlers

glue: function (elem, appendElem, stylesToAdd) {

// glue to DOM element

// elem can be ID or actual DOM element object

this.domElement = ZeroClipboard.jQuery(elem);

 

// float just above object, or zIndex 99 if dom element isn't set

var zIndex = 99;

if (this.domElement.style.zIndex) {

zIndex = parseInt(this.domElement.style.zIndex, 10) + 1;

}

 

if (typeof(appendElem) == 'string') {

appendElem = ZeroClipboard.jQuery(appendElem);

} else if (typeof(appendElem) == 'undefined') {

appendElem = document.getElementsByTagName('body')[0];

}

 

// find X/Y position of domElement

var box = ZeroClipboard.getDOMObjectPosition(this.domElement, appendElem);

 

// create floating DIV above element

this.div = document.createElement('div');

this.div.className = "zclip";

this.div.id = "zclip-" + this.movieId;

jQuery(this.domElement).data('zclipId', 'zclip-' + this.movieId);

var style = this.div.style;

style.position = 'absolute';

style.left = '' + box.left + 'px';

style.top = '' + box.top + 'px';

style.width = '' + box.width + 'px';

style.height = '' + box.height + 'px';

style.zIndex = zIndex;

 

if (typeof(stylesToAdd) == 'object') {

for (var addedStyle in stylesToAdd) {

style[addedStyle] = stylesToAdd[addedStyle];

}

}

 

// style.backgroundColor = '#f00'; // debug

appendElem.appendChild(this.div);

 

this.div.innerHTML = this.getHTML(box.width, box.height);

},

 

getHTML: function (width, height) {

// return HTML for movie

var html = '';

var flashvars = 'id=' + this.id + '&width=' + width + '&height=' + height;

 

if (navigator.userAgent.match(/MSIE/)) {

// IE gets an OBJECT tag

var protocol = location.href.match(/^https/i) ? 'https://' : 'http://';

html += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="' + protocol + 'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="' + width + '" height="' + height + '" id="' + this.movieId + '" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="' + ZeroClipboard.moviePath + '" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="' + flashvars + '"/><param name="wmode" value="transparent"/></object>';

} else {

// all other browsers get an EMBED tag

html += '<embed id="' + this.movieId + '" src="' + ZeroClipboard.moviePath + '" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="' + width + '" height="' + height + '" name="' + this.movieId + '" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="' + flashvars + '" wmode="transparent" />';

}

return html;

},

 

hide: function () {

// temporarily hide floater offscreen

if (this.div) {

this.div.style.left = '-2000px';

}

},

 

show: function () {

// show ourselves after a call to hide()

this.reposition();

},

 

destroy: function () {

// destroy control and floater

if (this.domElement && this.div) {

this.hide();

this.div.innerHTML = '';

 

var body = document.getElementsByTagName('body')[0];

try {

body.removeChild(this.div);

} catch (e) {

//do nothing

}

 

this.domElement = null;

this.div = null;

}

},

 

reposition: function (elem) {

// reposition our floating div, optionally to new container

// warning: container CANNOT change size, only position

if (elem) {

this.domElement = ZeroClipboard.jQuery(elem);

if (!this.domElement) this.hide();

}

 

if (this.domElement && this.div) {

var box = ZeroClipboard.getDOMObjectPosition(this.domElement);

var style = this.div.style;

style.left = '' + box.left + 'px';

style.top = '' + box.top + 'px';

}

},

 

setText: function (newText) {

// set text to be copied to clipboard

this.clipText = newText;

if (this.ready) {

this.movie.setText(newText);

}

},

 

addEventListener: function (eventName, func) {

// add user event listener for event

// event types: load, queueStart, fileStart, fileComplete, queueComplete, progress, error, cancel

eventName = eventName.toString().toLowerCase().replace(/^on/, '');

if (!this.handlers[eventName]) {

this.handlers[eventName] = [];

}

this.handlers[eventName].push(func);

},

 

setHandCursor: function (enabled) {

// enable hand cursor (true), or default arrow cursor (false)

this.handCursorEnabled = enabled;

if (this.ready) {

this.movie.setHandCursor(enabled);

}

},

 

setCSSEffects: function (enabled) {

// enable or disable CSS effects on DOM container

this.cssEffects = !! enabled;

},

 

receiveEvent: function (eventName, args) {

// receive event from flash

eventName = eventName.toString().toLowerCase().replace(/^on/, '');

 

// special behavior for certain events

switch (eventName) {

case 'load':

// movie claims it is ready, but in IE this isn't always the case...

// bug fix: Cannot extend EMBED DOM elements in Firefox, must use traditional function

this.movie = document.getElementById(this.movieId);

var self = this;

 

if (!this.movie) {

setTimeout(function () {

self.receiveEvent('load', null);

}, 1);

return;

}

 

// firefox on pc needs a "kick" in order to set these in certain cases

if (!this.ready && navigator.userAgent.match(/Firefox/) && navigator.userAgent.match(/Windows/)) {

setTimeout(function () {

self.receiveEvent('load', null);

}, 100);

this.ready = true;

return;

}

 

this.ready = true;

try {

this.movie.setText(this.clipText);

} catch (e) {}

try {

this.movie.setHandCursor(this.handCursorEnabled);

} catch (e) {}

break;

 

case 'mouseover':

if (this.domElement && this.cssEffects) {

this.domElement.addClass('hover');

if (this.recoverActive) {

this.domElement.addClass('active');

}

 

}

break;

 

case 'mouseout':

if (this.domElement && this.cssEffects) {

this.recoverActive = false;

if (this.domElement.hasClass('active')) {

this.domElement.removeClass('active');

this.recoverActive = true;

}

this.domElement.removeClass('hover');

 

}

break;

 

case 'mousedown':

if (this.domElement && this.cssEffects) {

this.domElement.addClass('active');

}

break;

 

case 'mouseup':

if (this.domElement && this.cssEffects) {

this.domElement.removeClass('active');

this.recoverActive = false;

}

break;

} // switch eventName

if (this.handlers[eventName]) {

for (var idx = 0, len = this.handlers[eventName].length; idx < len; idx++) {

var func = this.handlers[eventName][idx];

 

if (jQuery.isFunction(func)) {

// actual function reference

func(this, args);

} else if ((typeof(func) == 'object') && (func.length == 2)) {

// PHP style object + method, i.e. [myObject, 'myMethod']

func[0][func[1]](this, args);

} else if (typeof(func) == 'string') {

// name of function

window[func](this, args);

}

} // foreach event handler defined

} // user defined handler for event

}

 

};

转载于:https://www.cnblogs.com/melodi/p/5241659.html

weixin_30551947
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js 操作剪贴板
03-25 3776
通过 js 可以操作剪贴板的 复制 剪切 粘贴还有一个更方便的方法，直接使用第三方 js 库 clipboard.jsDOM元素 js 方法 实现原理 是通过 操作 输入框，只能操作输入框，不能操作其它元素。 所有的 都是要在选中输入框中的文本之后，才进行操作的。写个例子展示一下HTML 就直接在 中进行调试了JS 选中后的样子执行剪切操作后，再手动粘贴到下面的输入框中 就是这样了。
【JavaScript】使用剪切板的几种方法
qq_2511276124的博客
03-20 1907
Clipboard API不能用时，可以使用document.execCommand()方法，若两者都不可以使用，可以考虑引导用户手动复制。
JS复制内容到剪贴板的两种方式
最新发布
qq_52532624的博客
05-11 470
JS复制内容到剪贴板的两种方式
js处理剪贴板的内容
Yang'blog
11-02 6711
在学习这个知识点之前需要了解的是： 在网页中一般是不允许访问“剪贴板”的，因为这样存在着很大的安全隐患 在IE和FF中剪贴板的访问是可控的，但是在Opera、Chrome、Safari浏览器中是不允许访问的，这样就产生了浏览器兼容的问题 接下来进入正题： JavaScript提供了clipboardData 对象来对剪贴板进行访问。clipboardData提供了三个方法： clearData(
JavaScript实现点击复制（JS访问剪贴板相关）
weixin_45092437的博客
04-06 9705
document.execCommand()方法用来操作当前聚焦的可编辑元素（`input`、`textarea`）中的内容，例如复制、剪贴、粘贴、删除、文本加粗、插入图片等等效果。 Clipboard API 提供了响应剪贴板命令和异步读写系统剪贴板的能力，该API是用来取代document.execCommand() 这种剪贴板访问方式的。
JavaScript：实现复制粘贴剪切功能
热门推荐
lalala_dxf的博客
12-30 2万+
ClipboardAPI是下一代的剪贴板操作方法，比传统的方法更加强大、更合理。
JavaScript使用ZeroClipboard操作剪切板
10-19
主要为大家详细介绍了JavaScript使用ZeroClipboard操作剪切板的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
剪切板 网页操作
10-04
在网页操作中，JavaScript也提供了剪切板API，例如`navigator.clipboard.writeText`和`navigator.clipboard.readText`，用于读取和写入文本数据到剪切板。然而，出于安全考虑，这些API通常需要用户交互（如点击事件...
Js+Flash实现访问剪切板操作
10-27
最近需要遇到了这个问题点击按钮复制链接的功能果断度娘谷哥,最后找到得解决方案ZeroClipBoard一款开源得js+Flash实现得剪切板操作
js剪切板应用clipboardData实例解析
10-22
JavaScript 中的 `clipboardData` 对象是用于处理剪切板数据的接口，它允许我们在用户的复制、剪切和粘贴操作中访问和操作剪贴板上的内容。在本文中，我们将深入探讨如何使用 `clipboardData` 实现剪切板应用，并...
js修改剪切板内容的方法
xiaozhen0610的博客
07-19 1194
代码如下： //绑定在了body上，也可以绑定在其他可用元素行，但是不是所有元素都支持copy事件。 $(document.body).bind({ copy: function(e) {//copy事件 let cpTxt = "复制的数据"; let clipboardData = window.clipboardData; //for IE if (!cli
BX2001: IE 支持使用 window.clipboardData 访问系统剪贴板，Chrome 和 Safari 中存在类似的 Clipboard 对象但尚未实现，Firefox 和 Oper...
weixin_34129145的博客
06-08 441
http://www.w3help.org/zh-cn/causes/BX2001 标准参考 无 问题描述 IE 支持使用 window.clipboardData 对象内的一系列方法访问系统剪贴板；Chrome 和 Safari 中存在类似的 Clipboard 对象，且有与 IE 中类似的方法，但其功能尚未实现；Firefox 和 Opera 不支持这类对象。 造成的影响 若作者在...
JS操作剪贴板
qq_44884300的博客
04-13 1662
JS操作剪贴板
js实现粘贴板功能
qq_24184997的博客
06-22 4159
第一次写博客，js实现粘贴板方式有document.exeCommad，window.clipboardData的setData方法，还有使用ZeroClipboard插件1：通过document提供的exeCommad方法实现粘贴板功能 优点不需要引用外部插件google浏览器（兼容）IE浏览器（兼容）火狐（兼容）&lt;!DOCTYPE html&gt; &lt;html lang="en"&...
js 获取剪切板内容
我见青山多妩媚,料青山见我应如是
09-15 5254
js 获取剪切板内容
chrome浏览器下用几行js代码实现写入剪贴板功能
小蓝枣的博客
02-20 3501
chrome浏览器下用几行js代码实现写入剪贴板功能. 我们的原理是，创建一个 input 元素，将要写入的内容放入 input 里，然后选择 input，再调用浏览器的复制命令，将 input 里的内容复制，最后隐藏 input。 想通了非常容易理解。 我来一段简单的示例，就是将 "hello crx" 写入剪贴板。 // 调用浏览器的复制命令 document.execCommand("Copy"); // 将input元素隐藏，通知操作完成！ w.style.display='none';
js copy
weixin_30371875的博客
10-01 335
Javascript 实现复制（Copy）动作方法大全 投稿：hebedich 字体：[增加减小] 类型：转载 时间：2014-06-20我要评论 现在浏览器种类也越来越多，诸如 IE、Firefox、Chrome、Safari等等，因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了。 一、实现点击按钮，复制文本框中的的内容 ...
js读取剪切板
05-28
你可以使用以下代码读取剪贴板中的文本： ```javascript // 创建一个临时的textarea元素 let textarea = document.createElement('textarea');...在某些操作系统或浏览器中，该方法无法获取剪贴板中的内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值