小編給大家分享一下JS怎么實(shí)現(xiàn)粘貼板功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

公司主營(yíng)業(yè)務(wù)：網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。成都創(chuàng)新互聯(lián)推出西陵免費(fèi)做網(wǎng)站回饋大家。

使用剪貼板是一項(xiàng)基本技能。作為碼農(nóng)都應(yīng)知道，Tab,Ctrl/Cmd + A，Ctrl / Cmd + C以及Ctrl / Cmd + V分別是自動(dòng)聚焦、復(fù)制、粘貼的快捷鍵。

而對(duì)普通用戶可能就不太容易了。即使用戶知道剪貼板是什么，（除了）那些眼神極好或反應(yīng)很快的人，其他情況下很難以突出顯示他們想要的確切文字。若用戶不知道鍵盤快捷鍵，也看不到隱藏的編輯菜單，或從未使用右鍵菜單或不知道長(zhǎng)按觸屏彈出選項(xiàng)菜單，那么他很可能無(wú)法察覺(jué)到復(fù)制功能。

那么我們是否應(yīng)該提供一個(gè)“復(fù)制到剪貼板”按鈕來(lái)幫助用戶？這功能應(yīng)該會(huì)很有用，即使是對(duì)快捷鍵的人非常熟悉的用戶來(lái)說(shuō)。

關(guān)于剪貼板的安全

幾年前，瀏覽器不可能直接使用剪貼板。開(kāi)發(fā)人員不得不通過(guò)Flash來(lái)實(shí)現(xiàn)。

剪貼板看起來(lái)無(wú)關(guān)緊要，但想象一下，如果瀏覽器能夠隨意查看和操作內(nèi)容，會(huì)發(fā)生什么。JS腳本（包括第三方腳本）能查看剪貼板內(nèi)的文本信息，并將密碼，敏感信息甚至整個(gè)文檔發(fā)送到遠(yuǎn)程服務(wù)器。

現(xiàn)在的剪貼板基本功能有限，有如下限制：

1.大多數(shù)瀏覽器支持剪貼板，除了Safari。(譯注，Safari其實(shí)已經(jīng)支持)

2.支持因?yàn)g覽器而異，有些功能不完整或有問(wèn)題。

3.事件必須由用戶必須發(fā)起，如點(diǎn)擊鼠標(biāo)或按下鍵盤。腳本不能自由訪問(wèn)剪貼板。

document.execCommand（）

此方法就是實(shí)現(xiàn)剪貼板的關(guān)鍵，它可以傳入cut,copy,paste三種參數(shù)。從最常用的document.execCommand（'copy'）開(kāi)始介紹。

在使用之前，我們應(yīng)該檢查瀏覽器是否支持copy命令:document.queryCommandSupported('copy');或document.queryCommandEnabled('copy');，這兩個(gè)方法效果相同。

但在Chrome下，盡管Chrome確實(shí)支持使用copy命名,但兩個(gè)方法都返回false。所以***是將檢查代碼包在一個(gè)try-catch代碼塊中。

下一步，我們應(yīng)該允許用戶復(fù)制什么呢？必須突出顯示文本，所有瀏覽器都可用select()方法選擇文本input和textarea內(nèi)的文本。同時(shí)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);

但I(xiàn)E / Edge不支持。

clipboard.js

若你不想自己實(shí)現(xiàn)一個(gè)較為健壯的跨瀏覽器剪貼板方法的話，clipboard.js可以幫你。它有好幾種設(shè)置選項(xiàng)的方式，如H5的data屬性，設(shè)置綁定觸發(fā)元素以及目標(biāo)元素，如：

  copy

自己動(dòng)手實(shí)現(xiàn)

clipboard.js大小僅2Kb，若僅實(shí)現(xiàn)如下的部分功能的話，那么可以在20行的代碼內(nèi)實(shí)現(xiàn)：

1.僅部分表單元素可被復(fù)制

2.若在不支持的瀏覽器中（沒(méi)錯(cuò)，就是指Safari）(譯注，Safari其實(shí)已經(jīng)支持)，可突出顯示選中文本，并提示用戶按Ctrl / Cmd + C。

像clipboard.js一樣，先創(chuàng)建一個(gè)button用于觸發(fā)方法，它具有一個(gè)data屬性data-copytarget，指向要copy的元素(即#website)

  copy

一個(gè)立即執(zhí)行函數(shù)表達(dá)式綁定click事件的函數(shù)，該函數(shù)用于解析data-copytarget屬性內(nèi)容，選擇對(duì)應(yīng)字段的文本并執(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');       }     }   }  })();

示例

雖然在上例中，算上樣式和動(dòng)畫的代碼，代碼已經(jīng)超過(guò)20行了，但動(dòng)畫和樣式是可選的。

總結(jié)：

1.通過(guò).select()選擇要復(fù)制的表單元素的內(nèi)容

2.調(diào)用document.execCommand("copy")方法

3.調(diào)用.blur()方法，從表單元素中移除焦點(diǎn)

4.將第2、3步包在try catch塊中，在不支持的瀏覽器下則提示

以上是“JS怎么實(shí)現(xiàn)粘貼板功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！