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

本篇內(nèi)容介紹了“怎么使用JavaScript讀取所選文本并將其復(fù)制到剪貼板”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)公司專業(yè)IDC數(shù)據(jù)服務(wù)器托管提供商，專業(yè)提供成都服務(wù)器托管，服務(wù)器租用，簡陽服務(wù)器托管，簡陽服務(wù)器托管，成都多線服務(wù)器托管等服務(wù)器托管服務(wù)。

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

繼續(xù)前進(jìn)，我們還可以負(fù)責(zé)并動態(tài)選擇然后在頁面上檢索我們想要的內(nèi)容，例如特定DIV的內(nèi)容，而不是簡單地檢索用戶選擇的內(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è)備的所有表單字段的文本：

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){// check the user has selected some text inside field

var selectedtext =this.value.substring(this.selectionStart,this.selectionEnd)

output.innerHTML = selectedtext

}

},false)

</script>

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

“怎么使用JavaScript讀取所選文本并將其復(fù)制到剪貼板”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

新聞標(biāo)題：怎么使用JavaScript讀取所選文本并將其復(fù)制到剪貼板
鏈接地址：http://www.rwnh.cn/article26/jeeecg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、網(wǎng)站收錄、企業(yè)網(wǎng)站制作、App設(shè)計、品牌網(wǎng)站建設(shè)、軟件開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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

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

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

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

- 讀取字段值的選定部分