JS处理剪贴板

IE 是第一个支持剪贴板相关事件及通过 JavaScript 访问剪贴板数据的浏览器。IE 的实现成为了事实 标准，这是因为 Safari、Chrome、Opera 和 Firefox 都实现了相同的事件和剪贴板访问机制，后来 HTML5 也增加了剪贴板事件 。

创新互联公司网站建设由有经验的网站设计师、开发人员和项目经理组成的专业建站团队，负责网站视觉设计、用户体验优化、交互设计和前端开发等方面的工作，以确保网站外观精美、网站设计、成都网站制作易于使用并且具有良好的响应性。

(1) beforecopy:复制操作发生前触发。

(2) copy:复制操作发生时触发。

(3) beforecut:剪切操作发生前触发。

(4) cut:剪切操作发生时触发。

(5) beforepaste:粘贴操作发生前触发。

(6) paste:粘贴操作发生时触发。

这是一个比较新的控制剪贴板访问的标准，事件的行为及相关对象会因浏览器而异。在 Safari、 Chrome 和 Firefox 中，beforecopy、beforecut 和 beforepaste 事件只会在显示文本框的上下文菜 单(预期会发生剪贴板事件)时触发，但 IE 不仅在这种情况下触发，也会在 copy、cut 和 paste 事 件之前触发。无论是在上下文菜单中做出选择还是使用键盘快捷键，copy、cut 和 paste 事件在所有 浏览器中都会按预期触发。

通过 beforecopy、beforecut 和 beforepaste 事件可以在向剪贴板发送或从中检索数据前修改 数据。不过，取消这些事件并不会取消剪贴板操作。要阻止实际的剪贴板操作，必须取消 copy、cut 和 paste 事件。

剪贴板上的数据可以通过 window 对象(IE)或 event 对象(Firefox、Safari 和 Chrome)上的 clipboardData 对象来获取。在 Firefox、Safari 和 Chrome 中，为防止未经授权访问剪贴板，只能在剪 贴板事件期间访问 clipboardData 对象;IE 则在任何时候都会暴露 clipboardData 对象。为了跨浏 览器兼容，最好只在剪贴板事件期间使用这个对象。

clipboardData 对象上有 3 个方法:getData()、setData()和 clearData()，其中 getData() 方法从剪贴板检索字符串数据，并接收一个参数，该参数是要检索的数据的格式。IE 为此规定了两个选 项:"text"和"URL"。Firefox、Safari 和 Chrome 则期待 MIME 类型，不过会将"text"视为等价于 "text/plain"。

setData()方法也类似，其第一个参数用于指定数据类型，第二个参数是要放到剪贴板上的文本。 同样，IE 支持"text"和"URL"，Safari 和 Chrome 则期待 MIME 类型。不过，与 getData()不同的是， Safari 和 Chrome 不认可"text"类型。只有在 IE8 及更早版本中调用 setData()才有效，其他浏览器会 忽略对这个方法的调用。

这里的 getClipboardText()函数相对简单，它只需要知道 clipboardData 对象在哪里，然后 便可以通过"text"类型调用 getData()。相应的，setClipboardText()函数则要复杂一些。在确定 clipboardData 对象的位置之后，需要根据实现以相应的类型(Firefox、Safari 和 Chrome 是 "text/plain"，而 IE 是"text")调用 setData()。

如果文本框期待某些字符或某种格式的文本，那么从剪贴板中读取文本是有帮助的。比如，如果文 本框只允许输入数字，那么就必须检查粘贴过来的值，确保其中只包含数字。在 paste 事件中，可以 确定剪贴板上的文本是否无效，如果无效就取消默认行为，如下面的例子所示:

这个 onpaste 事件处理程序确保只有数字才能粘贴到文本框中。如果剪贴板中的值不符合指定模 式，则取消粘贴操作。Firefox、Safari 和 Chrome 只允许在 onpaste 事件处理程序中访问 getData() 方法。

因为不是所有浏览器都支持剪贴板访问，所以有时候更容易屏蔽一个或多个剪贴板操作。在支持 copy、cut 和 paste 事件的浏览器(IE、Safari、Chrome 和 Firefox)中，很容易阻止事件的默认行为。 在 Opera 中，则需要屏蔽导致相应事件的按键，同时阻止显示相应的上下文菜单。

javascript复制粘贴功能实现步骤

通知复制两个的没了解过，可以给你看下复制一个的

js部分

window.onload=function(){

var  oIpt = document.getElementsByTagName('input')

var  oTta = document.getElementsByTagName('textarea')

oIpt[0].onclick=function(){

oTta[0].select()

document.execCommand("Copy"); 

}

}

html部分

div  

textarea萤火虫/textarea 

/div

input type="button" value="复制" name=""

JS原生 复制粘贴

本篇文章不考虑浏览器兼容，谷歌浏览器亲测至少得88版本往上。Mac系统复制粘贴html数据，会自动加一些标签，小伙伴们自己测吧。一般需求用不着。

想要实现复制粘贴就只需要搞明白两件事就可以了。

第一就是如何往粘贴板里边存放数据，第二就是如何读取粘贴板里边的数据。

所操作的数据大致可以分为三类数据 1：字符串 2：带样式的HTML 3：图片 还有其他数据格式，还请各位小伙伴补充指教吧。

① 如果只是放普通字符串是最简单的

② 想要放入带格式的数据，比如想要往word内粘贴一个表格，跟正常写html标签加写样式是一样的

③往粘贴板内放入图片,目前只支持放png图片

其实也可以用放HTML的方式，把图片放入粘贴板内

JavaScript如何点击实现复制文字到剪切板

可以使用clipboard插件解决这个问题。

github里直接搜索clipboard就可以找到了。

该插件并不依赖jquery。直接引入即可使用。

使用方法：

input id="foo" value="被复制的内容"

button class="btn" data-clipboard-target="#foo"点击复制/button

new Clipboard('.btn');

这里的.btn是元素的class属性，可以使用任意id或者class以及元素节点名称来实例化插件。

默认会为元素绑定click事件，点击的时候会触发。

data-clipboard-target参数指定被复制内容的元素。

如上例，点击按钮后会将input的值“被复制的内容”几个字复制到剪切板中。

更多使用方法可以自行github查询。

如何用JS操作粘贴板

主要是用到了 window.clipboardData.setData("Text",copyText);

他主要有两个参数：第一个是设置要复制的是一段文本，第二个参数是要复制具体的内容，这个内容可以从文本框中或使用innerHTML获取。

简单的实例代码：

复制代码 代码如下:

script type="text/javascript"

function copyData() {

var copyText = document.getElementById("ctl00_cpRight_txtUrl").value;

window.clipboardData.setData("Text",copyText);

}

/script

asp:TextBox ID="txtUrl" runat="server" Height="30px" Width="349px"/asp:TextBox

input id="btnCopyUrl" type="button" value="复制URL到粘贴板" onclick="copyData()" /

注：ctl00_cpRight_txtUrl这个ID其实是txtUrl生成页面后自动生成的ID。

如何利用JS实现复制/粘贴功能

1、最基本的复制

Java代码

script language="JavaScript"

function readTxt()

{

alert(window.clipboardData.getData("text"));

}

function setTxt()

{

var t=document.getElementById("txt");

t.select();

window.clipboardData.setData('text',t.createTextRange().text);

}

/script

input name="txt" value="测试"

input type="button" value="复制" onclick="setTxt()"

input type="button" value="读取" onclick="readTxt()"

2、扩展复制：复制表格

Java代码

INPUT TYPE="button" value="选中测试表格" onclick="CopyTable()"

测试

TABLE border="1" id="oTable"

TR

TD测试表格/TD

TD测试表格/TD

/TR

TR

TD测试表格/TD

TD测试表格/TD

/TR

/TABLE文字

SCRIPT LANGUAGE="JavaScript"

!--

function CopyTable()

{

var txt = document.body.createTextRange();

txt.moveToElementText(document.getElementById('oTable'));

txt.select();

}

//--

/SCRIPT

、兼容IE，firefox等浏览器的复制

Java代码

script

function copyToClipboard(txt) {

if(window.clipboardData) {

window.clipboardData.clearData();

window.clipboardData.setData("Text", txt);

} else if(navigator.userAgent.indexOf("Opera") != -1) {

window.location = txt;

} else if (window.netscape) {

try {

netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");

} catch (e) {

alert("被浏览器拒绝！\n请在浏览器地址栏输入'about:config'并回车\n然后将'signed.applets.codebase_principal_support'设置为'true'");

}

var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);

if (!clip)

return;

var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);

if (!trans)

return;

trans.addDataFlavor('text/unicode');

var str = new Object();

var len = new Object();

var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);

var copytext = txt;

str.data = copytext;

trans.setTransferData("text/unicode",str,copytext.length*2);

var clipid = Components.interfaces.nsIClipboard;

if (!clip)

return false;

clip.setData(trans,null,clipid.kGlobalClipboard);

}

}

/script

button onclick="copyToClipboard('你好！');"复制文本“你好！”/button

textarea id="test"/textarea

网站标题：javascript粘贴,js粘贴图片
转载来于：http://kswjz.com/article/dsgossc.html