使用JavaScript讀取所選文字並將其複製到剪貼簿
詢問大多數開發人員如何將使用者選擇的內容複製到剪貼簿，他們會提到Flash的需求（因此 Zeroclipboard等指令碼的流行 ）。然而，這種想法的調整現在歸功於最近瀏覽器對JavaScript中關鍵技術的支援的改進，這使得複製到剪貼板本身成為可能。這種JavaScript方法在IE9 +，Firefox 41+和Chrome 42+中得到支援，最終為瀏覽器本身帶來了原生剪下/複製支援。在本教程中，我們將看到如何閱讀使用者選擇的文字內容，動態選擇頁面上的一些文字，最後但並非最不重要的是，將所選內容複製到剪貼簿，所有這些都只使用JavaScript。我們現在正進入無Flash區域！
檢索使用者選擇的文字內容
讓我們從頂部開始，檢索使用者在頁面上選擇的內容，直到任何文字內容。為此，我們使用了所有現代瀏覽器和IE9 +支援的方法 ：
|
1 2 3 4 五 6 7 |
"vertical-align: inherit;">
|
window.getSelection()返回頁面上當前選定的文字，並返回包含該資料的物件。要檢索實際文字，我們使用它將其轉換為字串。以下示例在使用者將滑鼠懸停在文件上時呼叫我們的函式，以便檢視使用者選擇的內容（如果有）：toString()getSelectionText()
|
1 2 3 4 五 6 |
|
我們首先檢查是否選擇了一些文字，就像使用者只是單擊頁面一樣，沒有。
選擇並讀取頁面上非表單元素的文字內容
繼續前進，我們還可以負責並動態選擇然後在頁面上檢索我們想要的內容，而不是簡單地檢索使用者選擇的內容，例如特定DIV的內容。這與簡單地使用元素innerHTML或 innerText屬性來獲取其內容非常不同; 我們希望 通過JavaScript 實際選擇該內容，這會開啟其他可能的操作，例如將其複製到使用者的剪貼簿。
要選擇非表單欄位元素的文字內容，我們首先建立一個新的 Range物件並將其設定為包含所需的元素。然後，將範圍新增到Selection物件以實際選擇它。讓我們看看它是如何工作的，這個函式根據傳入元素的元素動態選擇元素的文字內容：
|
1 2 3 4 五 6 7 |
|
要建立一個用於新增範圍的物件，我們使用; 因為預設情況下此方法會返回使用者選擇的文字（如果有的話），所以我們會立即呼叫其方法來清除平板。然後，我們開始建立一個空白範圍，將元素的內容歸零以選擇使用，然後將該範圍新增到物件中以進行選擇。 window.getSelection()removeAllRanges() range.selectNodeContents() Selection
一旦我們選擇了我們想要閱讀的文字，我們就轉向我們之前的getSelectionText()方法來讀取所選元素的內容，例如：
演示：
“我的媽媽總是說，'生活就像一盒巧克力。你永遠不會知道你會得到什麼。'” - Forrest
選擇並檢索文字
程式碼：
|
1 2 3 4 |
|
選擇和讀取表單元素的內容，如INPUT文字或TEXTAREA
為了選擇和讀取表格相關的欄位值，例如INPUT文字和TEXTAREA，該過程不同於選擇常規文字。我們大多數人已經知道選擇表單欄位的整個值，我們可以使用 inputElement.select()*，並檢索該值，探測 inputElement.value。但是，還可以通過程式設計方式選擇欄位值的一部分並獲取該值。讓我們看看如何做到這一點。
- 以程式設計方式選擇欄位值的一部分
要動態選擇INPUT文字或TEXTAREA元素的一部分，請使用此欄位指示所需選擇的起始和結束索引：
|
1 2 3 4 |
|
請注意，第二個引數 formElement.setSelectionRange()應該是要選擇的結束字元的索引加1，因此要選擇表單欄位的前5個字元，要輸入的結束索引值應為5或4（第5個字元的索引） ）加1。
演示：
選擇前5個字元 選擇第5個到最後一個字元
*注意： 在iOS裝置中（從iOS9開始），使用inputElement.select()快速選擇所有表單元素的內容似乎不起作用。但是，使用inputElement.setSelectionRange()確實。因此，以下選擇跨瀏覽器和裝置的所有表單欄位的文字：inputElement.setSelectionRange(0, inputElement.value.length)
- 讀取欄位值的選定部分
無論如何選擇表單欄位的值的一部分，無論是通過使用setSelectionRange()動態選擇該部分，還是使用者拖動他/她的滑鼠來進行使用者定義的選擇，檢索選擇的方法是獲取指數選擇的開始和結束字元，然後使用它們從表單欄位的值中提取該部分。我們可以使用以下方法獲取活動選擇的索引：
formElement.selectionStart：所選文字的第一個字元的索引。如果未選擇任何文字，則它包含輸入游標後面的字元的索引。formElement.selectionEnd：所選文字的最後一個字元的索引。如果未選擇任何文字，則它包含輸入游標後面的字元的索引。
上述屬性對於從表單欄位中獲取任何使用者選定文字特別有用，其中選擇的索引尚不為人所知。以下演示迴應了使用者使用以下屬性從TEXTAREA中選擇的內容：
演示（在textarea中選擇一些文字）：
輸出：
程式碼：
|
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
我們mouseup在目標TEXTAREA上附加一個“ ”事件，以便在使用者將其置於其中時進行監聽。在事件處理函式內部，為了檢測使用者選擇的內容，首先，我們檢查TEXTAREA selectionStart 和selectionEnd屬性是否包含不同的值 - 如果它們相同，則表示沒有選擇任何內容，在這種情況下它們都指向輸入游標後面的字元。如果它們的值不同，我們繼續將選定文字的索引對映到表單欄位值的值，以使用匯出實際選定的文字 formElement.value.substring()。
將所選文字複製到使用者剪貼簿
好了，現在關於如何閱讀頁面上所選內容的細節，無論是在頁面上，還是在特定的DIV或表單元素內，我們都可以繼續下一個緊迫的問題，實際上是複製那個內容到剪貼簿。正如本教程開頭所提到的，它歸結為使用該方法執行命令以“複製”（或“剪下”）文字到剪貼簿：
|
1 2 3 4 五 6 7 8 9 |
|
這裡的關鍵是行document.execCommand("copy")，它實際上執行動作以將頁面上當前選擇的任何內容複製到剪貼簿。為了檢測瀏覽器是否execCommand() 正確支援該方法，我們將操作放在一個try/catch()塊中; 如果呼叫execCommand()失敗，我們知道瀏覽器不支援此方法。
我們可以使用我們的新變形copySelectionText()函式與任何以前的方法來選擇/檢索一些文字然後將其複製到剪貼簿。例如，當用戶將滑鼠懸停在文件上時，下面的程式碼段將複製使用者在頁面上選擇的任何內容：
|
1 2 3 |
|
我們可以改進這個過程，但如果使用者選擇實際上包含一些資料，則只執行“複製”操作; 例如，如果使用者只是單擊頁面而不突出顯示任何內容，則不會選擇任何資料，在這種情況下，應該中止複製操作。這可以通過預先檢視使用者選擇的內容來完成：
|
1 2 3 4 五 6 |
|
現在是現場演示的時候了。嘗試選擇以下段落中的任何文字，以檢視其內容複製到剪貼簿（之後按“Ctrl V”進行貼上和確認）。我還添加了一個臨時顯示的工具提示，表示每次都成功：
演示（選擇下面段落中的任何文字將其複製到剪貼簿）：
“為了享受健康，為家人帶來真正的幸福，為所有人帶來和平，首先必須訓練和控制自己的思想。如果一個人可以控制自己的思想，他就能找到通往啟蒙的道路，以及所有的智慧和美德他自然會來找他。“ -佛
程式碼：
|
1 2 3 4 五 6 7 8 9 |
|
注意： 單擊此處獲取工具提示功能的來源。
將選定的表單欄位值複製到使用者剪貼簿
繼續，我們可以輕鬆地對錶單欄位值執行相同的帽子技巧。在下一個示例中，我們在INPUT文字欄位旁邊新增一個控制元件，以便使用者快速複製其值：
演示：
分享本教程 複製
程式碼：
|
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
將DIV的內容複製到剪貼簿
最後，為了更好的衡量，我們還可以看到一個例子，點選它時自動選擇並將DIV的內容複製到剪貼簿：
演示（點選下面的任何引號選擇其內容）：
“就在毛毛蟲認為世界即將結束時，他變成了一隻蝴蝶。”- 諺語
“偉大的頭腦討論想法;平均思想討論事件;小思想討論人。” - 埃莉諾羅斯福
“沒有你的同意，任何人都不會讓你感到自卑。” - 埃莉諾羅斯福
程式碼：
|
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 三十 31 |
|
這裡沒什麼新東西 - 我們只是監視mouseup引號DIVs共享父容器的“ ”事件，以檢測使用者何時點選其中一個內部DIV。當發生這種情況時，我們選擇DIV的內容，然後使用之前建立的函式將其複製到剪貼簿。
結論是
正如您所看到的，閱讀，更重要的是，將文字複製到剪貼簿現在可以完全是JavaScript事件。隨著Flash不再受瀏覽器和使用者的青睞，這確實是個好訊息。以上所有示例均適用於IE9 +，Firefox 41+和Chrome 42+。