用20行JS代码实现粘贴板功能

xiaoxiao2021-02-28  32

document.execCommand()

此方法就是实现剪贴板的关键,它可以传入cut,copy,paste三种参数。从最常用的document.execCommand('copy')开始介绍。

在使用之前,我们应该检查浏览器是否支持copy命令:document.queryCommandSupported('copy');document.queryCommandEnabled('copy');,这两个方法效果相同。

但在Chrome下,尽管Chrome确实支持使用copy命名,但两个方法都返回false。所以最好是将检查代码包在一个try-catch代码块中。

下一步,我们应该允许用户复制什么呢?必须突出显示文本,所有浏览器都可用select()方法选择文本input和textarea内的文本。同时Firefox和Chrome / Opera也支持document.createRange方法,该方法允许从任何元素中选择文本,如下:

// select text in #myelement node var myelement = document.getElementById('#myelement'), range = document.createRange(); range.selectNode(myelement); window.getSelection().addRange(range);

但IE / Edge不支持。

clipboard.js

若你不想自己实现一个较为健壮的跨浏览器剪贴板方法的话,clipboard.js可以帮你。它有好几种设置选项的方式,如H5的data属性,设置绑定触发元素以及目标元素,如:

<input id="copyme" value="text in this field will be copied" /> <button data-clipboard-target="#copyme">copy</button>

自己动手实现

clipboard.js大小仅2Kb,若仅实现如下的部分功能的话,那么可以在20行的代码内实现:

1.仅部分表单元素可被复制

2.若在不支持的浏览器中(没错,就是指Safari)(译注,Safari其实已经支持),可突出显示选中文本,并提示用户按Ctrl / Cmd + C

像clipboard.js一样,先创建一个button用于触发方法,它具有一个data属性data-copytarget,指向要copy的元素(即#website)

<input type="text" id="website" value="http://www.sitepoint.com/" /> <button data-copytarget="#website">copy</button> 一个立即执行函数表达式绑定click事件的函数,该函数用于解析 data-copytarget 属性内容,选择对应字段的文本并执行 document.execCommand('copy') 。若失败,文本保持选中状态,显示提示框: (function() { 'use strict'; // click events document.body.addEventListener('click', copy, true); // event handler function copy(e) { // find target element var t = e.target, c = t.dataset.copytarget, inp = (c ? document.querySelector(c) : null); // is element selectable? if (inp && inp.select) { // select text inp.select(); try { // copy text document.execCommand('copy'); inp.blur(); } catch (err) { alert('please press Ctrl/Cmd+C to copy'); } } } })();

总结:

1.通过.select()选择要复制的表单元素的内容

2.调用document.execCommand("copy")方法

3.调用.blur()方法,从表单元素中移除焦点

4.将第2、3步包在try catch块中,在不支持的浏览器下则提示

其他方式

有很多新颖的剪贴板应用方式。例如Trello.com,将鼠标悬停在卡片上时,可以按Ctrl / Cmd + C 并将该卡片的链接地址复制到剪贴板。其背后实现的方式为:先创建一个包含URL的隐藏表单元素,然后选中并复制其内容。

转载请注明原文地址: https://www.6miu.com/read-2632845.html

最新回复(0)