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

詢問大多數開發人員如何將用戶選擇的內容複製到剪貼板，他們會提到Flash的需求（因此 Zeroclipboard等腳本的流行）。然而，這種想法的調整現在歸功於最近瀏覽器對JavaScript中關鍵技術的支持的改進，這使得複製到剪貼板本身成爲可能。這種JavaScript方法在IE9 +，Firefox 41+和Chrome 42+中得到支持，最終爲瀏覽器本身帶來了原生剪切/複製支持。在本教程中，我們將看到如何閱讀用戶選擇的文本內容，動態選擇頁面上的一些文本，最後但並非最不重要的是，將所選內容複製到剪貼板，所有這些都只使用JavaScript。我們現在正進入無Flash區域！ document.execCommand()

檢索用戶選擇的文本內容

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

五

function getSelectionText（）{

var selectedText =“”

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

selectedText = window.getSelection（）。toString（）

}

返回selectedText

}

window.getSelection()返回頁面上當前選定的文本，並返回包含該數據的對象。要檢索實際文本，我們使用它將其轉換爲字符串。以下示例在用戶將鼠標懸停在文檔上時調用我們的函數，以便查看用戶選擇的內容（如果有）： SelectiontoString()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

var copysuccess = copySelectionText（）//將用戶選定的文本複製到剪貼板

}

}，false）

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

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

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

代碼：

五

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

var buddhaquote = document.getElementById（'buddhaquote'）

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

var selected = getSelectionText（）//調用getSelectionText（）以查看所選內容

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

var copysuccess = copySelectionText（）//將用戶選定的文本複製到剪貼板

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

將所選文本複製到用戶剪貼板

將選定的表單字段值複製到用戶剪貼板

將DIV的內容複製到剪貼板

結論是

這4個小程序爲什麼有很多人在用，僅僅是因爲不佔手機內存空間？

這些資源網站爲什麼能獲得5萬知乎大佬推薦，而我錯失了什麼嗎？

這7款APP到底有什麼好，值得知乎2萬人點贊，原來如此！

一分鐘做出老闆喜歡的Excel表格！直接套用，提升你的辦公效率！

Adobe Photoshop CC 2019綠色破解工具下載

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結