20行JS代碼實現(xiàn)粘貼板復制功能
使用剪貼板是一項基本技能。作為碼農(nóng)都應知道, Tab , Ctrl/Cmd + A , Ctrl / Cmd + C 以及 Ctrl / Cmd + V 分別是自動聚焦、復制、粘貼的快捷鍵。
而對普通用戶可能就不太容易了。即使用戶知道剪貼板是什么,(除了)那些眼神極好或反應很快的人,其他情況下很難以突出顯示他們想要的確切文字。若用戶不知道鍵盤快捷鍵,也看不到隱藏的編輯菜單,或從未使用右鍵菜單或不知道長按觸屏彈出選項菜單,那么他很可能無法察覺到復制功能。
那么我們是否應該提供一個“復制到剪貼板”按鈕來幫助用戶?這功能應該會很有用,即使是對快捷鍵的人非常熟悉的用戶來說。
關于剪貼板的安全
幾年前,瀏覽器不可能直接使用剪貼板。開發(fā)人員不得不通過Flash來實現(xiàn)。
剪貼板看起來無關緊要,但想象一下,如果瀏覽器能夠隨意查看和操作內(nèi)容,會發(fā)生什么。JS腳本(包括第三方腳本)能查看剪貼板內(nèi)的文本信息,并將密碼,敏感信息甚至整個文檔發(fā)送到遠程服務器。
現(xiàn)在的剪貼板基本功能有限,有如下限制:
- 大多數(shù)瀏覽器支持剪貼板,除了Safari。
- 支持因瀏覽器而異 ,有些功能不完整或有問題。
- 事件必須由用戶必須發(fā)起,如點擊鼠標或按下鍵盤。腳本不能自由訪問剪貼板。
document.execCommand()
此方法就是實現(xiàn)剪貼板的關鍵,它可以傳入 cut , copy , paste 三種參數(shù)。從最常用的 document.execCommand('copy')
開始介紹。
在使用之前,我們應該檢查瀏覽器是否支持 copy 命令: document.queryCommandSupported('copy');
或 document.queryCommandEnabled('copy');
,這兩個方法效果相同。
但在Chrome下,盡管Chrome確實支持使用 copy 命名,但兩個方法都返回 false 。所以最好是將檢查代碼包在一個 try-catch 代碼塊中。
下一步,我們應該允許用戶復制什么呢?必須突出顯示文本,所有瀏覽器都可用 select() 方法選擇文本input和textarea內(nèi)的文本。同時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
若你不想自己實現(xiàn)一個較為健壯的跨瀏覽器剪貼板方法的話, clipboard.js 可以幫你。它有好幾種設置選項的方式,如H5的data屬性,設置綁定觸發(fā)元素以及目標元素,如:
<input id="copyme" value="text in this field will be copied" /> <button data-clipboard-target="#copyme">copy</button>
自己動手實現(xiàn)
clipboard.js大小僅2Kb,若僅實現(xiàn)如下的部分功能的話,那么可以在20行的代碼內(nèi)實現(xiàn):
僅部分表單元素可被復制
若在不支持的瀏覽器中(沒錯,就是指Safari),可突出顯示選中文本,并提示用戶按 Ctrl / Cmd + C 。
像clipboard.js一樣,先創(chuàng)建一個button用于觸發(fā)方法,它具有一個data屬性 data-copytarget ,指向要copy的元素(即 #website )
<input type="text" id="website" value="http://www.sitepoint.com/" /> <button data-copytarget="#website">copy</button> 一個立即執(zhí)行函數(shù)表達式綁定click事件的函數(shù),該函數(shù)用于解析 data-copytarget 屬性內(nèi)容,選擇對應字段的文本并執(zhí)行 document.execCommand('copy') ,。若失敗,文本保持選中狀態(tài),顯示提示框: (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'); } } } })();
雖然在上例中,算上樣式和動畫的代碼,代碼已經(jīng)超過20行了,但動畫和樣式是可選的。
總結:
- 通過 .select() 選擇要復制的表單元素的內(nèi)容
- 調(diào)用 document.execCommand("copy") 方法
- 調(diào)用 .blur() 方法,從表單元素中移除焦點
- 將第2、3步包在 try catch 塊中,在不支持的瀏覽器下則提示
其他方式
有很多新穎的剪貼板應用方式。例如 Trello.com ,將鼠標懸停在卡片上時,可以按 Ctrl / Cmd + C
并將該卡片的鏈接地址復制到剪貼板。其背后實現(xiàn)的方式為:先創(chuàng)建一個包含URL的隱藏表單元素,然后選中并復制其內(nèi)容。非常巧妙且實用 —— 我懷疑很少有用戶知道這個功能!
總結
以上所述是小編給大家介紹的20行JS代碼實現(xiàn)粘貼板復制功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
JS button按鈕實現(xiàn)submit按鈕提交效果
今天在使用表單是同時使用POST更新、刪除操作。然而form表單的 submit 且一旦提交則全部提交,所以想到的實現(xiàn)方法就是 使用button實現(xiàn),怎么實現(xiàn)呢?下面小編給大家分享JS button按鈕實現(xiàn)submit按鈕提交效果,感興趣的朋友參考下吧2016-11-11javascript實現(xiàn)的元素拖動函數(shù)宿主為瀏覽器
這篇文章主要介紹了javascript實現(xiàn)的元素拖動,將相應的元素對象的引用傳到函數(shù)中2014-07-07正則表達式刪除JavaScript代碼中的空格、注釋和換行符
這篇文章主要介紹了正則表達式刪除JavaScript代碼中的空格、注釋和換行符,需要的朋友可以參考下2023-12-12javascript 對象 與 prototype 原型用法實例分析
這篇文章主要介紹了javascript 對象 與 prototype 原型用法,結合實例形式分析了javascript 對象 與 prototype 原型實現(xiàn)對象創(chuàng)建、繼承、拷貝等相關操作技巧,需要的朋友可以參考下2019-11-11