如何用20行JS代码实现剪贴板功能

使用剪贴板是一项基本功。作为程序员的你应该知道，Tab、Ctrl/Cmd+A、Ctrl/Cmd+C、Ctrl/Cmd+V分别是自动对焦、复制和粘贴的快捷键。对于普通用户来说可能并不那么容易。即使用户知道剪贴板是什么，也很难（除了）那些眼睛最好或反应很快的人来突出显示他们想要的确切文本。如果用户不知道键盘快捷键，没有看到隐藏的编辑菜单，或者从未使用过右键菜单或长按触摸屏来调出选项菜单，那么他可能不会意识到的复制功能。那么我们是否应该提供一个“复制到剪贴板”按钮来帮助用户呢？这个功能应该很有用，即使对于非常熟悉键盘快捷键的用户也是如此。关于剪贴板安全几年前，浏览器不可能直接使用剪贴板。开发人员必须通过Flash来实现它。剪贴板可能看起来无关紧要，但想象一下如果浏览器能够随意查看和操作内容会发生什么。JS脚本（包括第三方脚本）可以查看剪贴板中的文本信息，并将密码、敏感信息甚至整个文档发送到远程服务器。目前剪贴板的基本功能有限，有以下局限性：1.大多数浏览器都支持剪贴板，Safari除外。（注解，Safari已经支持了）2、不同浏览器支持不同，部分功能不全或有问题。3.事件必须由用户发起，比如点击鼠标或者按下键盘。脚本无法自由访问剪贴板。document.execCommand()这个方法是实现剪贴板的关键，它可以传递剪切、复制、粘贴三个参数。从最常用的document.execCommand('copy')开始。在使用之前，我们应该检查浏览器是否支持复制命令：document.queryCommandSupported('copy');或document.queryCommandEnabled('copy');这两种方法具有相同的效果。但是在Chrome下，虽然Chrome确实支持使用复制命名，但是两种方法都返回false。所以最好的方法是将检查代码包装在try-catch代码块中。接下来，我们应该允许用户复制什么？文本必须高亮显示，所有浏览器都可以使用select()方法来选择文本输入和文本区域中的文本。同时，Firefox和Chrome/Opera也支持document.createRange方法，允许从任意元素中选择文本，如下：//selecttextin#myelementnodevarmyelement=document.getElementById('#myelement'),range=document.createRange();范围.selectNode(myelement);window.getSelection().addRange(范围);但IE/Edge不支持。clipboard.js如果你不想自己实现一个更强大的跨浏览器剪贴板方法，clipboard.js可以帮助你。它有几种设置选项的方法，比如H5的data属性，设置绑定触发元素和目标元素，比如：复制自己动手。clipboard.js的大小只有2Kb。如果只实现下面的部分功能，20行代码就可以实现：1.只能复制部分表单元素2.如果不在支持的浏览器中（是的，Safari）（译注，Safari已经支持），你可以突出显示所选文本并提示用户按Ctrl/Cmd+C。和clipboard.js一样，先创建一个触发方法的按钮，它有一个数据属性data-copytarget，指向要复制的元素（即#website）copy是一个立即执行绑定点击事件的函数表达式的函数，用于解析data-copytarget属性的内容，选择对应字段的文本，执行document.execCommand('copy')。如果失败，文本保持选中状态并显示提示框：(function(){'usestrict';//clickeventsdocument.body.addEventListener('click',copy,true);//eventhandlerfunctioncopy(e){//findtargetelementvart=e.target,c=t.dataset.copytarget,inp=(c?document.querySelector(c):null);//iselementselectable?if(inp&&inp.select){//selecttextinp.select();try{//copytextdocument.execCommand('copy');inp.blur();}catch(err){alert('pleasepressCtrl/Cmd+Ctocopy');}}}})();虽然在上面的例子中，countstyles和Animation代码，代码20多行，animation和style是可选的。总结：1.通过.select()选择要复制的表单元素的内容2.调用document.execCommand("copy")方法3.调用.blur()方法使表单元素脱离焦点4.设置第二个，3个步骤包裹在trycatch块中，在不支持的浏览器中，提示其他方法。有许多新颖的剪贴板应用方法。对于Trello.com，当您将鼠标悬停在一张卡片上时，您可以按Ctrl/Cmd+C并将该卡片的链接地址复制到剪贴板。其背后的方法是：首先创建一个包含URL的隐藏表单元素，然后选择并复制其内容。非常简洁实用-我怀疑很少有用户知道这个功能！