使用JavaScript讀取所選文本并將其復(fù)制到剪貼板

印度阿三17 2018-09-19

展開全文

詢問大多數(shù)開發(fā)人員如何將用戶選擇的內(nèi)容復(fù)制到剪貼板，他們會提到Flash的需求（因此 Zeroclipboard等腳本的流行）。然而，這種想法的調(diào)整現(xiàn)在歸功于最近瀏覽器對JavaScript中關(guān)鍵技術(shù)的支持的改進(jìn)，這使得復(fù)制到剪貼板本身成為可能。這種JavaScript方法在IE9 +，F(xiàn)irefox 41+和Chrome 42+中得到支持，最終為瀏覽器本身帶來了原生剪切/復(fù)制支持。在本教程中，我們將看到如何閱讀用戶選擇的文本內(nèi)容，動態(tài)選擇頁面上的一些文本，最后但并非最不重要的是，將所選內(nèi)容復(fù)制到剪貼板，所有這些都只使用JavaScript。我們現(xiàn)在正進(jìn)入無Flash區(qū)域！ document.execCommand()

? 檢索用戶選擇的文本內(nèi)容

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

五

function getSelectionText（）{

var selectedText =“”

if（window.getSelection）{//所有現(xiàn)代瀏覽器和IE9 +

selectedText = window.getSelection（）。toString（）

}

返回selectedText

}

window.getSelection()返回頁面上當(dāng)前選定的文本，并返回包含該數(shù)據(jù)的對象。要檢索實(shí)際文本，我們使用它將其轉(zhuǎn)換為字符串。以下示例在用戶將鼠標(biāo)懸停在文檔上時調(diào)用我們的函數(shù)，以便查看用戶選擇的內(nèi)容（如果有）： SelectiontoString()getSelectionText()

五

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

var thetext = getSelectionText（）

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

console.log（thetext）//記錄用戶在頁面上選擇的任何文本內(nèi)容

}

}，false）

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

? 選擇并讀取頁面上非表單元素的文本內(nèi)容

繼續(xù)前進(jìn)，我們還可以負(fù)責(zé)并動態(tài)選擇然后在頁面上檢索我們想要的內(nèi)容，而不是簡單地檢索用戶選擇的內(nèi)容，例如特定DIV的內(nèi)容。這與簡單地使用元素innerHTML或 innerText屬性來獲取其內(nèi)容非常不同; 我們希望通過JavaScript 實(shí)際選擇該內(nèi)容，這會打開其他可能的操作，例如將其復(fù)制到用戶的剪貼板。

要選擇非表單字段元素的文本內(nèi)容，我們首先創(chuàng)建一個新的 Range對象并將其設(shè)置為包含所需的元素。然后，將范圍添加到Selection對象以實(shí)際選擇它。讓我們看看它是如何工作的，這個函數(shù)根據(jù)傳入元素的元素動態(tài)選擇元素的文本內(nèi)容：

五

function selectElementText（el）{

var range = document.createRange（）//創(chuàng)建新的范圍對象

range.selectNodeContents（el）//設(shè)置范圍以包含所需的元素文本

var selection = window.getSelection（）//從當(dāng)前用戶選擇的文本中獲取Selection對象

selection.removeAllRanges（）//取消選擇任何用戶選擇的文本（如果有）

selection.addRange（range）//為Selection對象添加范圍以選擇它

}

要創(chuàng)建一個用于添加范圍的對象，我們使用; 因?yàn)槟J(rèn)情況下此方法會返回用戶選擇的文本（如果有的話），所以我們會立即調(diào)用其方法來清除平板。然后，我們開始創(chuàng)建一個空白范圍，將元素的內(nèi)容歸零以選擇使用，然后將該范圍添加到對象中以進(jìn)行選擇。Selection window.getSelection()removeAllRanges() range.selectNodeContents() Selection

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

演示：

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

選擇并檢索文本

代碼：

var para = document.getElementById（'para'）

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

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

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

? 選擇和讀取表單元素的內(nèi)容，如INPUT文本或TEXTAREA

為了選擇和讀取表格相關(guān)的字段值，例如INPUT文本和TEXTAREA，該過程不同于選擇常規(guī)文本。我們大多數(shù)人已經(jīng)知道選擇表單字段的整個值，我們可以使用 inputElement.select()*，并檢索該值，探測 inputElement.value。但是，還可以通過編程方式選擇字段值的一部分并獲取該值。讓我們看看如何做到這一點(diǎn)。

- 以編程方式選擇字段值的一部分

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

var emailfield = document.getElementById（“email”）

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

emailfield.setSelectionRange（0,5）//選擇輸入字段的前5個字符

emailfield.setSelectionRange（5，emailfield.value.length）//選擇輸入字段的第5個到最后一個字符

請注意，第二個參數(shù) formElement.setSelectionRange()應(yīng)該是要選擇的結(jié)束字符的索引加1，因此要選擇表單字段的前5個字符，要輸入的結(jié)束索引值應(yīng)為5或4（第5個字符的索引））加1。

演示：

選擇前5個字符選擇第5個到最后一個字符

*注意：在iOS設(shè)備中（從iOS9開始），使用inputElement.select()快速選擇所有表單元素的內(nèi)容似乎不起作用。但是，使用inputElement.setSelectionRange()確實(shí)。因此，以下選擇跨瀏覽器和設(shè)備的所有表單字段的文本：

inputElement.setSelectionRange(0, inputElement.value.length)

- 讀取字段值的選定部分

無論如何選擇表單字段的值的一部分，無論是通過使用setSelectionRange()動態(tài)選擇該部分，還是用戶拖動他/她的鼠標(biāo)來進(jìn)行用戶定義的選擇，檢索選擇的方法是獲取指數(shù)選擇的開始和結(jié)束字符，然后使用它們從表單字段的值中提取該部分。我們可以使用以下方法獲取活動選擇的索引：

formElement.selectionStart：所選文本的第一個字符的索引。如果未選擇任何文本，則它包含輸入光標(biāo)后面的字符的索引。
formElement.selectionEnd：所選文本的最后一個字符的索引。如果未選擇任何文本，則它包含輸入光標(biāo)后面的字符的索引。

上述屬性對于從表單字段中獲取任何用戶選定文本特別有用，其中選擇的索引尚不為人所知。以下演示回應(yīng)了用戶使用以下屬性從TEXTAREA中選擇的內(nèi)容：

演示（在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）{//檢查用戶是否在字段內(nèi)選擇了一些文本

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

output.innerHTML = selectedtext

}

}，false）

</ SCRIPT>

我們mouseup在目標(biāo)TEXTAREA上附加一個“ ”事件，以便在用戶將其置于其中時進(jìn)行監(jiān)聽。在事件處理函數(shù)內(nèi)部，為了檢測用戶選擇的內(nèi)容，首先，我們檢查TEXTAREA selectionStart 和selectionEnd屬性是否包含不同的值 - 如果它們相同，則表示沒有選擇任何內(nèi)容，在這種情況下它們都指向輸入光標(biāo)后面的字符。如果它們的值不同，我們繼續(xù)將選定文本的索引映射到表單字段值的值，以使用導(dǎo)出實(shí)際選定的文本 formElement.value.substring()。

? 將所選文本復(fù)制到用戶剪貼板

好了，現(xiàn)在關(guān)于如何閱讀頁面上所選內(nèi)容的細(xì)節(jié)，無論是在頁面上，還是在特定的DIV或表單元素內(nèi)，我們都可以繼續(xù)下一個緊迫的問題，實(shí)際上是復(fù)制那個內(nèi)容到剪貼板。正如本教程開頭所提到的，它歸結(jié)為使用該方法執(zhí)行命令以“復(fù)制”（或“剪切”）文本到剪貼板：document.execCommand()

五

function copySelectionText（）{

var copysuccess // var檢查execCommand是否成功執(zhí)行

嘗試{

copysuccess = document.execCommand（“copy”）//運(yùn)行命令將所選文本復(fù)制到剪貼板

} catch（e）{

copysuccess = false

}

返回copysuccess

}

這里的關(guān)鍵是行document.execCommand("copy")，它實(shí)際上執(zhí)行動作以將頁面上當(dāng)前選擇的任何內(nèi)容復(fù)制到剪貼板。為了檢測瀏覽器是否execCommand() 正確支持該方法，我們將操作放在一個try/catch()塊中; 如果調(diào)用execCommand()失敗，我們知道瀏覽器不支持此方法。

我們可以使用我們的新變形copySelectionText()函數(shù)與任何以前的方法來選擇/檢索一些文本然后將其復(fù)制到剪貼板。例如，當(dāng)用戶將鼠標(biāo)懸停在文檔上時，下面的代碼段將復(fù)制用戶在頁面上選擇的任何內(nèi)容：

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

var copysuccess = copySelectionText（）//將用戶選定的文本復(fù)制到剪貼板

}，false）

我們可以改進(jìn)這個過程，但如果用戶選擇實(shí)際上包含一些數(shù)據(jù)，則只執(zhí)行“復(fù)制”操作; 例如，如果用戶只是單擊頁面而不突出顯示任何內(nèi)容，則不會選擇任何數(shù)據(jù)，在這種情況下，應(yīng)該中止復(fù)制操作。這可以通過預(yù)先查看用戶選擇的內(nèi)容來完成：

五

var selected = getSelectionText（）//調(diào)用<a href="#getselectiontext">getSelectionText（）</a>以查看所選內(nèi)容

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

var copysuccess = copySelectionText（）//將用戶選定的文本復(fù)制到剪貼板

}

}，false）

現(xiàn)在是現(xiàn)場演示的時候了。嘗試選擇以下段落中的任何文本，以查看其內(nèi)容復(fù)制到剪貼板（之后按“Ctrl V”進(jìn)行粘貼和確認(rèn)）。我還添加了一個臨時顯示的工具提示，表示每次都成功：

演示（選擇下面段落中的任何文本將其復(fù)制到剪貼板）：

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

代碼：

五

createtooltip（）//通過每頁調(diào)用ONCE來創(chuàng)建工具提示。請參閱下面的“注釋”

var buddhaquote = document.getElementById（'buddhaquote'）

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

var selected = getSelectionText（）//調(diào)用getSelectionText（）以查看所選內(nèi)容

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

var copysuccess = copySelectionText（）//將用戶選定的文本復(fù)制到剪貼板

showtooltip（e）中

}

}，false）

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

? 將選定的表單字段值復(fù)制到用戶剪貼板

繼續(xù)，我們可以輕松地對表單字段值執(zhí)行相同的帽子技巧。在下一個示例中，我們在INPUT文本字段旁邊添加一個控件，以便用戶快速復(fù)制其值：

演示：

代碼：

五

<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">復(fù)制</a>

</字段集>

? 將DIV的內(nèi)容復(fù)制到剪貼板

最后，為了更好的衡量，我們還可以看到一個例子，點(diǎn)擊它時自動選擇并將DIV的內(nèi)容復(fù)制到剪貼板：

演示（點(diǎn)擊下面的任何引號選擇其內(nèi)容）：

“就在毛毛蟲認(rèn)為世界即將結(jié)束時，他變成了一只蝴蝶?！? 諺語

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

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

代碼：

五

三十

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

<div class =“motivate”>

“就在毛毛蟲認(rèn)為世界即將結(jié)束時，他變成了一只蝴蝶?！? - 諺語

</ 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 //在現(xiàn)代和舊版IE瀏覽器之間均衡事件對象

var target = e.target || e.srcElement //獲取目標(biāo)元素鼠標(biāo)結(jié)束

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

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

var copysuccess = copySelectionText（）

if（copysuccess）{

showtooltip（e）中

}

}，false）

</ SCRIPT>

這里沒什么新東西 - 我們只是監(jiān)視mouseup引號DIVs共享父容器的“ ”事件，以檢測用戶何時點(diǎn)擊其中一個內(nèi)部DIV。當(dāng)發(fā)生這種情況時，我們選擇DIV的內(nèi)容，然后使用之前創(chuàng)建的函數(shù)將其復(fù)制到剪貼板。

? 結(jié)論是

正如您所看到的，閱讀，更重要的是，將文本復(fù)制到剪貼板現(xiàn)在可以完全是JavaScript事件。隨著Flash不再受瀏覽器和用戶的青睞，這確實(shí)是個好消息。以上所有示例均適用于IE9 +，F(xiàn)irefox 41+和Chrome 42+。

來源：http://www./content-1-13532.html

本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：印度阿三17 > 《待分類》

舉報/認(rèn)領(lǐng)