使用JavaScript讀取所選文字並將其複製到剪貼簿

JavaScript · 發表 2018-09-15 14:59:00

摘要：詢問大多數開發人員如何將使用者選擇的內容複製到剪貼簿，他們會提到Flash的需求（因此 Zeroclipboard 等指令碼的流行）。然而，這種想法的調整現在歸功於最近瀏覽器對JavaScript中關鍵技術的支援的改進，這使得複製到剪貼板本身成為可能。這種JavaScript方法 ...

詢問大多數開發人員如何將使用者選擇的內容複製到剪貼簿，他們會提到Flash的需求（因此ofollow,noindex" target="_blank"> Zeroclipboard 等指令碼的流行）。然而，這種想法的調整現在歸功於最近瀏覽器對JavaScript中關鍵技術的支援的改進，這使得複製到剪貼板本身成為可能。這種JavaScript方法在IE9 +，Firefox 41+和Chrome 42+中 得到支援，最終為瀏覽器本身帶來了原生剪下/複製支援。在本教程中，我們將看到如何閱讀使用者選擇的文字內容，動態選擇頁面上的一些文字，最後但並非最不重要的是，將所選內容複製到剪貼簿，所有這些都只使用JavaScript。我們現在正進入無Flash區域！ API/Document/execCommand" data-cke-saved-href="https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand">document.execCommand()

檢索使用者選擇的文字內容

讓我們從頂部開始，檢索使用者在頁面上選擇的內容，直到任何文字內容。為此，我們使用了所有現代瀏覽器和IE9 + 支援的方法： window.getSelection()

五

 function getSelectionText（）{

var selectedText =“”

if （window.getSelection）{ //所有現代瀏覽器和IE9 +

selectedText = window.getSelection（）。toString（）

}

返回selectedText

}

window.getSelection() 返回頁面上當前選定的文字，並返回包含該資料的物件。要檢索實際文字，我們使用它將其轉換為字串。以下示例在使用者將滑鼠懸停在文件上時呼叫我們的函式，以便檢視使用者選擇的內容（如果有）： Selection toString() getSelectionText()

五

document.addEventListener（ 'mouseup' ， function （）{

var thetext = getSelectionText（）

if （thetext.length> 0）{ //檢查是否選擇了一些文字

console.log（thetext） //記錄使用者在頁面上選擇的任何文字內容

}

}， false ）

我們首先檢查是否選擇了一些文字，就像使用者只是單擊頁面一樣，沒有。

選擇並讀取頁面上非表單元素的文字內容

繼續前進，我們還可以負責並動態選擇然後在頁面上檢索我們想要的內容，而不是簡單地檢索使用者選擇的內容，例如特定DIV的內容。這與簡單地使用元素innerHTML 或 innerText 屬性來獲取其內容非常不同; 我們希望通過JavaScript 實際選擇該內容，這會開啟其他可能的操作，例如將其複製到使用者的剪貼簿。

要選擇非表單欄位元素的文字內容，我們首先建立一個新的 Range物件並將其設定為包含所需的元素。然後，將範圍新增到Selection 物件以實際選擇它。讓我們看看它是如何工作的，這個函式根據傳入元素的元素動態選擇元素的文字內容：

五

 function selectElementText（el）{

var range = document.createRange（） //建立新的範圍物件

range.selectNodeContents（el） //設定範圍以包含所需的元素文字

var selection = window.getSelection（） //從當前使用者選擇的文字中獲取Selection物件

selection.removeAllRanges（） //取消選擇任何使用者選擇的文字（如果有）

selection.addRange（range） //為Selection物件新增範圍以選擇它

}

要建立一個用於新增範圍的物件，我們使用; 因為預設情況下此方法會返回使用者選擇的文字（如果有的話），所以我們會立即呼叫其方法來清除平板。然後，我們開始建立一個空白範圍，將元素的內容歸零以選擇使用，然後將該範圍新增到物件中以進行選擇。 Selection window.getSelection() removeAllRanges() range.selectNodeContents() Selection

一旦我們選擇了我們想要閱讀的文字，我們就轉向我們之前的getSelectionText() 方法來讀取所選元素的內容，例如：

演示：

“我的媽媽總是說，'生活就像一盒巧克力。你永遠不會知道你會得到什麼。'” - Forrest

選擇並檢索文字

程式碼：

 var para = document.getElementById（ 'para' ）

selectElementText（para） //選擇我們希望閱讀的元素文字

var paratext = getSelectionText（） //讀取使用者選擇

alert（paratext） //提醒“我的媽媽總是說...”

選擇和讀取表單元素的內容，如INPUT文字或TEXTAREA

為了選擇和讀取表格相關的欄位值，例如INPUT文字和TEXTAREA，該過程不同於選擇常規文字。我們大多數人已經知道選擇表單欄位的整個值，我們可以使用 inputElement.select()* ，並檢索該值，探測 inputElement.value 。但是，還可以通過程式設計方式選擇欄位值的一部分並獲取該值。讓我們看看如何做到這一點。

- 以程式設計方式選擇欄位值的一部分

要動態選擇INPUT文字或TEXTAREA元素的一部分，請使用此欄位指示所需選擇的起始和結束索引： formElement.setSelectionRange()

 var emailfield = document.getElementById（“email”）

emailfield.focus（） //在setSelectionRange（）工作之前，這在大多數瀏覽器中都是必需的

emailfield.setSelectionRange（0,5） //選擇輸入欄位的前5個字元

emailfield.setSelectionRange（5，emailfield.value.length） //選擇輸入欄位的第5個到最後一個字元

請注意，第二個引數 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中選擇一些文字）：

輸出：

程式碼：

五

<textarea id =“quote”cols =“50”rows =“5”>

這裡有一些文字

</ textarea>的

<div id =“output”> </ div>

<SCRIPT>

var quotearea = document.getElementById（ 'quote' ）

var output = document.getElementById（ 'output' ）

quotearea.addEventListener（ 'mouseup' ， function （）{

if （ this .selectionStart！= this .selectionEnd）{ //檢查使用者是否在欄位內選擇了一些文字

var selectedtext = this .value.substring（ this .selectionStart， this .selectionEnd）

output.innerHTML = selectedtext

}

}， false ）

</ SCRIPT>

我們mouseup 在目標TEXTAREA上附加一個“ ”事件，以便在使用者將其置於其中時進行監聽。在事件處理函式內部，為了檢測使用者選擇的內容，首先，我們檢查TEXTAREA selectionStart 和selectionEnd 屬性是否包含不同的值 - 如果它們相同，則表示沒有選擇任何內容，在這種情況下它們都指向輸入游標後面的字元。如果它們的值不同，我們繼續將選定文字的索引對映到表單欄位值的值，以使用匯出實際選定的文字 formElement.value.substring() 。

將所選文字複製到使用者剪貼簿

好了，現在關於如何閱讀頁面上所選內容的細節，無論是在頁面上，還是在特定的DIV或表單元素內，我們都可以繼續下一個緊迫的問題，實際上是複製那個內容到剪貼簿。正如本教程開頭所提到的，它歸結為使用該方法執行命令以“複製”（或“剪下”）文字到剪貼簿： document.execCommand()

五

 function copySelectionText（）{

var copysuccess // var檢查execCommand是否成功執行

嘗試{

copysuccess = document.execCommand（“copy”） //執行命令將所選文字複製到剪貼簿

} catch （e）{

copysuccess = false 

}

返回copysuccess

}

這裡的關鍵是行document.execCommand("copy") ，它實際上執行動作以將頁面上當前選擇的任何內容複製到剪貼簿。為了檢測瀏覽器是否execCommand() 正確支援該方法，我們將操作放在一個try/catch() 塊中; 如果呼叫execCommand() 失敗，我們知道瀏覽器不支援此方法。

我們可以使用我們的新變形copySelectionText() 函式與任何以前的方法來選擇/檢索一些文字然後將其複製到剪貼簿。例如，當用戶將滑鼠懸停在文件上時，下面的程式碼段將複製使用者在頁面上選擇的任何內容：

document.body.addEventListener（ 'mouseup' ， function （）{

var copysuccess = copySelectionText（） //將使用者選定的文字複製到剪貼簿

}， false ）

我們可以改進這個過程，但如果使用者選擇實際上包含一些資料，則只執行“複製”操作; 例如，如果使用者只是單擊頁面而不突出顯示任何內容，則不會選擇任何資料，在這種情況下，應該中止複製操作。這可以通過預先檢視使用者選擇的內容來完成：

五

var selected = getSelectionText（） //呼叫<a href="#getselectiontext">getSelectionText（）</a>以檢視所選內容

if （selected.length> 0）{ //如果所選文字長度大於0

}

}， false ）

現在是現場演示的時候了。嘗試選擇以下段落中的任何文字，以檢視其內容複製到剪貼簿（之後按“Ctrl V”進行貼上和確認）。我還添加了一個臨時顯示的工具提示，表示每次都成功：

演示（選擇下面段落中的任何文字將其複製到剪貼簿）：

“為了享受健康，為家人帶來真正的幸福，為所有人帶來和平，首先必須訓練和控制自己的思想。如果一個人可以控制自己的思想，他就能找到通往啟蒙的道路，以及所有的智慧和美德他自然會來找他。“ -佛

程式碼：

五

createtooltip（） //通過每頁呼叫ONCE來建立工具提示。請參閱下面的“註釋”

var buddhaquote = document.getElementById（ 'buddhaquote' ）

buddhaquote.addEventListener（ 'mouseup' ， function （e）{

var selected = getSelectionText（） //呼叫getSelectionText（）以檢視所選內容

if （selected.length> 0）{ //如果所選文字長度大於0

showtooltip（e）中

}

}， false ）

注意：單擊此處獲取工具提示功能的來源。

將選定的表單欄位值複製到使用者剪貼簿

繼續，我們可以輕鬆地對錶單欄位值執行相同的帽子技巧。在下一個示例中，我們在INPUT文字欄位旁邊新增一個控制元件，以便使用者快速複製其值：

演示：

分享本教程複製

程式碼：

五

<SCRIPT>

function copyfieldvalue（e，id）{

var field = document.getElementById（id）

field.focus（）

field.setSelectionRange（0，field.value.length）

var copysuccess = copySelectionText（）

if （copysuccess）{

showtooltip（e）中

}

}

</ SCRIPT>

<fieldset style =“max-width：600px”>

<legend>分享本教程</ legend>

<input id =“url”type =“text”size =“60”value =“http: //www.javascriptkit.com/javatutors/copytoclipboard.shtml”/> 

<a href= "#" onClick= "copyfieldvalue(event,'url');return false" >複製</a>

</欄位集>

將DIV的內容複製到剪貼簿

最後，為了更好的衡量，我們還可以看到一個例子，點選它時自動選擇並將DIV的內容複製到剪貼簿：

演示（點選下面的任何引號選擇其內容）：

“就在毛毛蟲認為世界即將結束時，他變成了一隻蝴蝶。”- 諺語

“偉大的頭腦討論想法;平均思想討論事件;小思想討論人。” - 埃莉諾羅斯福

“沒有你的同意，任何人都不會讓你感到自卑。” - 埃莉諾羅斯福

程式碼：

五

三十

<div id =“motivatebox”style =“overflow：hidden; margin：1em auto”>

<div class =“motivate”>

“就在毛毛蟲認為世界即將結束時，他變成了一隻蝴蝶。” - 諺語

</ DIV>

<div class =“motivate”>

“偉大的頭腦討論想法;平均思想討論事件;小思想討論人。” - 埃莉諾羅斯福

</ DIV>

<div class =“motivate”>

“沒有你的同意，任何人都不會讓你感到自卑。” - 埃莉諾羅斯福

</ DIV>

</ DIV>

<SCRIPT>

var motivatebox = document.getElementById（ 'motivatebox' ）

motivatebox.addEventListener（ 'mouseup' ， function （e）{

var e = e || event //在現代和舊版IE瀏覽器之間均衡事件物件

var target = e.target || e.srcElement //獲取目標元素滑鼠結束

if （target.className == 'motivate' ）{

selectElementText（target） //選擇我們想要閱讀的元素文字

var copysuccess = copySelectionText（）

if （copysuccess）{

showtooltip（e）中

}

}， false ）

</ SCRIPT>

這裡沒什麼新東西 - 我們只是監視mouseup 引號DIVs共享父容器的“ ”事件，以檢測使用者何時點選其中一個內部DIV。當發生這種情況時，我們選擇DIV的內容，然後使用之前建立的函式將其複製到剪貼簿。

結論是

正如您所看到的，閱讀，更重要的是，將文字複製到剪貼簿現在可以完全是JavaScript事件。隨著Flash不再受瀏覽器和使用者的青睞，這確實是個好訊息。以上所有示例均適用於IE9 +，Firefox 41+和Chrome 42+。

使用JavaScript讀取所選文字並將其複製到剪貼簿

​ 檢索使用者選擇的文字內容

​ 選擇並讀取頁面上非表單元素的文字內容

演示：

程式碼：

​ 選擇和讀取表單元素的內容，如INPUT文字或TEXTAREA

演示：

- 讀取欄位值的選定部分

演示（在textarea中選擇一些文字）：

輸出：

程式碼：

​ 將所選文字複製到使用者剪貼簿

演示（選擇下面段落中的任何文字將其複製到剪貼簿）：

程式碼：

​ 將選定的表單欄位值複製到使用者剪貼簿

演示：

程式碼：

​ 將DIV的內容複製到剪貼簿

演示（點選下面的任何引號選擇其內容）：

程式碼：

​ 結論是

您可能也會喜歡…

檢索使用者選擇的文字內容

選擇並讀取頁面上非表單元素的文字內容

選擇和讀取表單元素的內容，如INPUT文字或TEXTAREA

將所選文字複製到使用者剪貼簿

將選定的表單欄位值複製到使用者剪貼簿

將DIV的內容複製到剪貼簿

結論是