溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“怎么使用JavaScript讀取所選文本并將其復制到剪貼板”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
繼續(xù)前進，我們還可以負責并動態(tài)選擇然后在頁面上檢索我們想要的內容，例如特定DIV的內容，而不是簡單地檢索用戶選擇的內容。這與僅使用元素innerHTML或 innerText屬性來獲取其內容非常不同; 我們希望 通過JavaScript 實際選擇該內容，從而打開其他可能的操作，例如將其復制到用戶的剪貼板。
要選擇非表單字段元素的文本內容，我們首先創(chuàng)建一個新的 Range對象并將其設置為包含所需的元素。然后，將范圍添加到Selection對象以實際選擇它。讓我們看看它是如何工作的，這個函數(shù)根據(jù)傳入元素的元素動態(tài)選擇元素的文本內容：
1 2 3 4 五 6 7 |
|
要創(chuàng)建一個用于添加范圍的對象，我們使用; 因為默認情況下此方法會返回用戶選擇的文本（如果有的話），所以我們會立即調用其方法來清除平板。然后，我們開始創(chuàng)建一個空白范圍，將元素的內容歸零以選擇使用，然后將該范圍添加到對象中以進行選擇。Selection window.getSelection()removeAllRanges()
range
.selectNodeContents() Selection
一旦我們選擇了我們想要閱讀的文本，我們就轉向我們之前的getSelectionText()方法來讀取所選元素的內容，例如：
演示：
“我的媽媽總是說，'生活就像一盒巧克力。你永遠不會知道你會得到什么。'” - Forrest
選擇并檢索文本
代碼：
1 2 3 4 |
|
選擇和讀取表單元素的內容，如INPUT文本或TEXTAREA為了選擇和讀取表格相關的字段值，例如INPUT文本和TEXTAREA，該過程不同于選擇常規(guī)文本。我們大多數(shù)人已經(jīng)知道選擇表單字段的整個值，我們可以使用 inputElement.select()*，并檢索該值，探測 inputElement.value。但是，還可以通過編程方式選擇字段值的一部分并獲取該值。讓我們看看如何做到這一點。
要動態(tài)選擇INPUT文本或TEXTAREA元素的一部分，請使用以指示字段中所需選擇的起始和結束索引：
formElement.setSelectionRange()
1 2 3 4 |
|
請注意，第二個參數(shù) formElement.setSelectionRange()應該是要選擇的結束字符的索引加1，因此要選擇表單字段的前5個字符，要輸入的結束索引值應為5或4（第5個字符的索引） ）加1。
演示：
選擇前5個字符 選擇第5個到最后一個字符
*注意： 在iOS設備中（從iOS9開始），使用inputElement.select()快速選擇所有表單元素的內容似乎不起作用。但是，使用inputElement.setSelectionRange()的確如此。因此，以下選擇跨瀏覽器和設備的所有表單字段的文本：inputElement.setSelectionRange(0, inputElement.value.length)
無論如何選擇表單字段的值的一部分，無論是通過使用setSelectionRange()動態(tài)選擇該部分，還是用戶拖動他/她的鼠標來進行用戶定義的選擇，檢索選擇的方法是獲取指數(shù)選擇的開始和結束字符，然后使用它們從表單字段的值中提取該部分。我們可以使用以下方法獲取活動選擇的索引：
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上附加一個“ ”事件，以便在用戶將鼠標放入其中時進行監(jiān)聽。在事件處理函數(shù)內部，為了檢測用戶選擇的內容，首先，我們檢查TEXTAREA selectionStart 和selectionEnd屬性是否包含不同的值 - 如果它們相同，則表示沒有選擇任何內容，在這種情況下它們都指向輸入光標后面的字符。如果它們的值不同，我們繼續(xù)將所選文本的索引映射到表單字段值的值，以使用派生實際選定的文本 formElement.value.substring()。
“怎么使用JavaScript讀取所選文本并將其復制到剪貼板”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網(wǎng)站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。
