JS实现内容复制功能

JavaScript013

JS实现内容复制功能,第1张

复制是一个使用频率特别高的操作,在网页中,一般可以选中要复制的内容,使用快捷键 ctrl+c 将内容复制到剪贴板。除了使用系统提供的快捷方式复制网页内容,我们还可以用JS实现复制,这得益于document的 execCommand('copy') 命令。 实现整个复制功能,需要以下三个步骤: 大部分HTML元素都有innerText和innerHTML两个属性,innerText属性返回文本内容,innerHTML属性返回标签元素。我们可以创建一个函数,用于获取需要返回的内容: 上面的selectText函数接收一个DOM元素,返回DOM元素的innerText属性值。 我们可以通过表单元素的select()方法选中内容,表单元素因为textarea限制少于input,所以推荐使用textarea。我们可以动态创建一个textarea元素,将textarea的value属性值设置为上面的innerText属性值,再执行textarea的select方法选中。 上面实现了选中,下面就可以实现复制功能了。 最后一步就可以用execCommand('copy')实现复制了,它可以复制浏览器中选中的文本,比如说上面被textarea选中的文本,复制之后记得移除textarea。 第二步和第三步可以优化一下,创建一个copy函数,函数参数设置为第一步需要复制的文本,返回值为复制的结果。 完整JS示例如下: 可以将上面的完整JS示例写入一个JS文件,将JS文件引入HTML中,通过JS点击事件来执行复制函数。 效果图:

<input type="text" id="copyText" value="" style="color:#fffbackground:#fffborder-color:#fffborder: 0position:absolutetop:-50pxleft:0" />

<script type="text/jscript">

//复制文本

function copyText(str)

{

if(str.length >0)

{

$("#copyText").val(str)

//复制文本

var input = document.getElementById("copyText")

input.value = str// 修改文本框的内容

input.select()// 选中文本

document.execCommand("copy")// 执行浏览器复制命令

//layer提示框

layer.closeAll('msg',{time:10000})

layer.msg('<span style="color:red">已复制:</span></br>'+str)

}

}

</script>

<a href="jscript:copyText('要复制的内容')">要复制的内容</a>

这是代码,这里的文本框不能设置隐藏,否则复制失效,所以我设置的样式让它在浏览器之外的地方,无法被看到

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 中,则需要屏蔽导致相应事件的按键,同时阻止显示相应的上下文菜单。