使用剪貼簿是一項基本技能。身為碼農都應知道, Tab , Ctrl/Cmd + A , Ctrl / Cmd + C 以及 Ctrl / Cmd + V 分別是自動對焦、複製、貼上的快捷鍵。
而對一般使用者可能就不太容易了。即使使用者知道剪貼簿是什麼,(除了)那些眼神極好或反應很快的人,其他情況下很難以突出顯示他們想要的確切文字。若使用者不知道鍵盤快速鍵,也看不到隱藏的編輯選單,或從未使用右鍵選單或不知道長按觸控螢幕彈出選項選單,那麼他很可能無法察覺到複製功能。
那麼我們是否應該提供一個「複製到剪貼簿」按鈕來幫助使用者?這功能應該會很有用,即使是對快捷鍵的人非常熟悉的使用者來說。
關於剪貼簿的安全性
幾年前,瀏覽器不可能直接使用剪貼簿。開發人員不得不透過Flash來實現。
剪貼簿看起來無關緊要,但想像一下,如果瀏覽器能夠隨意查看和操作內容,會發生什麼。 JS腳本(包括第三方腳本)可查看剪貼簿內的文字訊息,並將密碼,敏感資訊甚至整個文件傳送到遠端伺服器。
現在的剪貼簿基本功能有限,有以下限制:
大多數瀏覽器支援剪貼簿,除了Safari。
支援因瀏覽器而異 ,有些功能不完整或有問題。
事件必須由使用者必須發起,例如點擊滑鼠或按下鍵盤。腳本不能自由存取剪貼簿。
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行的程式碼內實現:
僅部分錶單元素可被複製
若在不支援的瀏覽器中(沒錯,就是指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'); } } } })();
範例
雖然在上例中,算上樣式和動畫的程式碼,程式碼已經超過20行了,但動畫和樣式是可選的。
總結:
透過.select() 選擇要複製的表單元素的內容
呼叫document.execCommand( "copy") 方法
呼叫.blur() 方法,從表單元素移除焦點
將第2、3步驟包在try catch 區塊中,在不支援的瀏覽器下則提示
#其他方式
##有很多新穎的剪貼簿應用方式。例如 Trello.com ,將滑鼠停留在卡片上時,可以按 Ctrl / Cmd + C 並將該卡片的連結位址複製到剪貼簿。背後實現的方式為:先建立一個包含URL的隱藏表單元素,然後勾選並複製其內容。非常巧妙且實用 —— 我懷疑很少有用戶知道這個功能!
JavaScript實作複製內容到貼簿程式碼_javascript技巧
js實作點擊圖片將圖片位址複製到貼上簿的方法_javascript技巧#
以上是JS實現貼上簿複製功能代碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!