textarea 失去焦點 選中文字不變色_很少又人知道的qjavascript操作：使用JavaScript讀取所選文字並將其複製到剪貼簿...
很少有人知道的qjavascript操作：使用JavaScript讀取所選文字並將其複製到剪貼簿
廢話少說直接上乾貨。
document.execCommand()
一、檢索使用者選擇的文字內容
讓我們從頂部開始，檢索使用者在頁面上選擇的所有文字內容。為此，我們使用，這是所有現代瀏覽器和IE9 +都支援的方法 ：window.getSelection()
<h1>
道可道，非常道；名可名，非常名。無名天地之始，有名萬物之母。故常無慾，以觀其妙；常
有欲，以觀其徼
</h1>
// 選中 function getSelectionText(){ var selectedText = "" if (window.getSelection){ // all modern browsers and IE9+ selectedText = window.getSelection().toString() } return selectedText } // 監聽事件，輸出選中的文字 document.addEventListener('mouseup', function(){ var thetext = getSelectionText() if (thetext.length > 0){ // check there's some text selected console.log(thetext) // logs whatever textual content the user has selected on the page } }, false)我們首先檢查是否選擇了一些文字，就好像使用者只是單擊頁面上一樣。
二、選擇並讀取頁面上非表單元素的文字內容
繼續前進，而不是簡單地檢索使用者選擇的內容，我們還可以負責並動態選擇然後在頁面上檢索我們想要的內容，例如特定DIV的內容。這與僅使用元素的innerHTML或innerText屬性來獲取其內容非常不同。我們希望 通過JavaScript 實際選擇該內容，從而開啟其他可能的操作，例如將其複製到使用者剪貼簿。
要選擇非表單欄位元素的文字內容，我們首先建立一個新的 Range物件並將其設定為包含所需的元素。然後，將範圍新增到Selection物件以實際選擇它。讓我們確切地看一下它如何與基於傳遞到元素的元素動態選擇元素的文字內容的函式一起工作：
要建立要新增範圍的物件，我們使用；由於此方法預設情況下會返回使用者選擇的文字(如果有的話)，因此我們隨後立即呼叫其方法來清除此記錄。然後，我們開始建立一個空白範圍，使用將該元素的內容歸零以進行選擇，然後將該範圍新增到物件中以進行選擇。Selection`` window.getSelection()``removeAllRanges()`` range.selectNodeContents()`` Selection
選擇了要閱讀的文字後，我們將轉向先前的getSelectionText()方法來讀取所選元素的內容，例如：
演示：
天下皆知美之為美，斯惡(è)已；皆知善之為善，斯不善已。故有無相生，難易相成，長短相
較，高下相傾，音聲相和(hè)，前後相隨。是以聖人處無為之事，行不言之教，萬物作焉而不辭，生而
不有，為而不恃，功成而弗居。夫(fú)唯弗居，是以不去
程式碼：
<div id="para">
天下皆知美之為美，斯惡(è)已；皆知善之為善，斯不善已。故有無相生，難易相成，長短相
較，高下相傾，音聲相和(hè)，前後相隨。是以聖人處無為之事，行不言之教，萬物作焉而不辭，生而
不有，為而不恃，功成而弗居。夫(fú)唯弗居，是以不去
</div>br>
<button onclick="handleClick()"> 選擇並顯示文字</button> // 選擇並讀取頁面上非表單元素的文字內容 function selectElementText(el){ var range = document.createRange() // create new range object range.selectNodeContents(el) // set range to encompass desired element text var selection = window.getSelection() // get Selection object from currently user selected text selection.removeAllRanges() // unselect any user selected text (if any) selection.addRange(range) // add range to Selection object to select it } function handleClick() { var para = document.getElementById('para') selectElementText(para) // select the element's text we wish to read var paratext = getSelectionText() // read the user selection alert(paratext) // alerts "My mama always says..." }
三、選擇並讀取表單元素的內容，例如輸入文字或TEXTAREA
對於選擇和讀取與表單相關的欄位值(例如INPUT文字和TEXTAREA)，此過程與選擇常規文字不同。我們大多數人已經知道選擇一個表單欄位的整個值，我們可以只使用inputElement.select()*，而要獲取該值，則是probe inputElement.value。但是，也可以通過程式設計方式選擇欄位值的一部分，然後取回該值。讓我們看看如何做到這一點。
-以程式設計方式選擇欄位值的一部分
要動態選擇INPUT文字或TEXTAREA元素的一部分，請使用來指示欄位中所需選擇的開始和結束索引：formElement.setSelectionRange()
請注意，的第二個引數formElement.setSelectionRange()應為要選擇加1的結束字元的索引，因此要選擇表單欄位的前5個字元，要輸入的結束索引值應為5或4(第5個字元的索引)加1。
演示：
選擇前5個字元 選擇倒數第五個字元
*注意： 在iOS裝置(自iOS9起)中，inputElement.select()似乎無法使用快速選擇表單元素的所有內容。但是，使用了inputElement.setSelectionRange()。因此，以下內容將跨瀏覽器和裝置選擇所有表單欄位的文字：
// 選擇並讀取元素表單內容 var emailfield = document.getElementById("email") // this is necessary in most browsers before setSelectionRange() will work // 點選選擇輸入框前5個 function handclickfont5() { emailfield.focus() emailfield.setSelectionRange(0, 5) // select first 5 characters of input field } // 點選選擇輸入框後5個 function handclickend5() { emailfield.focus() console.log(emailfield.value.length) emailfield.setSelectionRange(5, emailfield.value.length) // select the 5th to last characters of input field }-讀取欄位值的選定部分
不管如何選擇表單欄位值的一部分，無論是通過setSelectionRange()動態選擇該部分，還是通過使用者拖動滑鼠進行使用者定義的選擇，檢索選擇的方法都是獲取索引的索引。選擇的開始和結束字元，然後使用它們從表單欄位的值中提取該部分。我們可以使用以下方法獲取活動選擇的索引：
formElement.selectionStart：所選文字的第一個字元的索引。如果未選擇任何文字，則該文字包含輸入游標之後的字元的索引。formElement.selectionEnd：所選文字的最後一個字元的索引。如果未選擇任何文字，則該文字包含輸入游標之後的字元的索引。
上述屬性對於從尚不知道選擇索引的表單域中獲取任何使用者選擇的文字特別有用。以下演示使用這些屬性回顯使用者從TEXTAREA中選擇的內容：
演示(在文字區域內選擇一些文字)：
程式碼：
// 讀取欄位值的選定部分 演示(在文字區域內選擇一些文字)： 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)我們mouseup在目標TEXTAREA上附加一個“ ”事件，以在使用者將滑鼠懸停在其上時進行監聽。在事件處理程式函式內部，要檢測使用者所選擇的內容，首先，我們檢查TEXTAREA selectionStart 和selectionEnd屬性是否包含不同的值-如果它們相同，則表示未選擇任何內容，在這種情況下它們都指向索引。輸入游標之後的字元。如果它們的值不同，我們將使用來將所選文字的索引對映到表單欄位值的值，以得出實際的所選文字formElement.value.substring()。
四、將所選文字複製到使用者剪貼簿
好的，既然已經閱讀了如何閱讀頁面上所選內容的基本內容，無論是在頁面上，還是在特定的DIV或表單元素中，我們都可以繼續進行下一個緊迫的問題，實際上是在複製該內容到剪貼簿。正如本教程開始提到的那樣，歸結為使用該方法執行命令以將文字“複製”(或“剪下”)到剪貼簿：document.execCommand()
這裡的關鍵是line document.execCommand("copy")，它實際上執行將頁面上當前選擇的內容複製到剪貼簿的操作。為了檢測瀏覽器是否execCommand() 正確支援該方法，我們將操作放在一個try/catch()塊中；如果呼叫execCommand()失敗，則表明瀏覽器不支援此方法。
我們可以將新想到的copySelectionText()功能與任何先前的方法一起使用，以選擇/檢索某些文字，然後將其複製到剪貼簿。例如，當用戶將滑鼠懸停在文件上時，下面的程式碼片段將複製使用者在頁面上選擇的內容：
我們可以改進此過程，儘管僅在使用者選擇實際上包含一些資料時才執行“複製”操作。例如，如果使用者僅單擊頁面而不突出顯示任何內容，則不會選擇任何資料，在這種情況下，複製操作應中止。只需檢視使用者預先選擇的內容即可完成此操作：
現在該進行現場演示了。嘗試在以下段落中選擇任何文字，以檢視其內容已複製到剪貼簿(然後按“ Ctrl V”以貼上並確認)。我還添加了一個工具提示，該提示會臨時顯示以表示每次成功：
演示(在下面的段落中選擇任何文字以將其複製到剪貼簿)：
“要享受健康，為家人帶來真正的幸福，為所有人帶來和平，首先必須紀律和控制自己的思想。如果一個人可以控制自己的思想，他就可以找到開悟的道路，以及所有的智慧和美德。自然會來找他。” -佛
程式碼：
function copySelectionText(){var copysuccess // var to check whether execCommand successfully executedtry{copysuccess = document.execCommand("copy") // run command to copy selected text to clipboard} catch(e){copysuccess = false}return copysuccess } var tooltip; // global variables oh my! Refactor when deploying! var hidetooltiptimer // 建立tips標籤 function createtooltip(){ // call this function ONCE at the end of page to create tool tip object tooltip = document.createElement('div') tooltip.style.cssText = 'position:absolute; background:black; color:white; padding:4px;z-index:10000;' + 'border-radius:2px; font-size:12px;box-shadow:3px 3px 3px rgba(0,0,0,.4);' + 'opacity:0;transition:opacity 0.3s' tooltip.innerHTML = '已複製' document.body.appendChild(tooltip) } // 顯示tips 標籤 function showtooltip(e){ var evt = e || event clearTimeout(hidetooltiptimer) tooltip.style.left = evt.pageX - 10 + 'px' tooltip.style.top = evt.pageY + 15 + 'px' tooltip.style.opacity = 1 hidetooltiptimer = setTimeout(function(){ tooltip.style.opacity = 0 }, 1000) } // 選中即複製 createtooltip() // create tooltip by calling it ONCE per page. See "Note" below var buddhaquote = document.getElementById('buddhaquote') buddhaquote.addEventListener('mouseup', function(e){ var selected = getSelectionText() // call getSelectionText() to see what was selected if (selected.length > 0){ // if selected text length is greater than 0 var copysuccess = copySelectionText() // copy user selected text to clipboard showtooltip(e) } }, false)五、將選定的表單欄位值複製到使用者剪貼簿
繼續，我們可以輕鬆地對錶單欄位值執行相同的帽子戲法。在下一個示例中，我們在INPUT文字欄位旁邊新增一個控制元件，以使使用者快速複製其值：
演示：
程式碼：
// 複製input 內容 function copyfieldvalue(e, id){ var field = document.getElementById(id) field.focus() field.setSelectionRange(0, field.value.length) var copysuccess = copySelectionText() if (copysuccess){ showtooltip(e) } }六、將DIV的內容複製到剪貼簿
最後，從很好的角度來看，讓我們看一個示例，單擊該示例時，它會自動選擇DIV的內容並將其複製到剪貼簿：
演示(單擊以下任何引號以選擇其內容)：
道衝而用之或不盈，淵兮似萬物之宗。挫其銳，解其紛，和其光，同其塵。湛兮似或存，吾不
知誰之子，象帝之先。
上善若水。水善利萬物而不爭，處眾人之所惡(wù)，故幾(jī)於道。居善地，心善淵，與
善仁，言善信，正善治，事善能，動善時。夫唯不爭，故無尤。
道衝而用之或不盈，淵兮似萬物之宗。挫其銳，解其紛，和其光，同其塵。湛兮似或存，吾不
知誰之子，象帝之先。
程式碼：
// 案例 var motivatebox = document.getElementById('motivatebox') motivatebox.addEventListener('mouseup', function(e){ var e = e || event // equalize event object between modern and older IE browsers var target = e.target || e.srcElement // get target element mouse is over if (target.className == 'motivate'){ selectElementText(target) // select the element's text we wish to read var copysuccess = copySelectionText() if (copysuccess){ showtooltip(e) } } }, false)這裡沒有什麼新鮮的內容，我們只需監視mouseup引號DIV的共享父容器的“ ”事件即可檢測使用者何時單擊了這些內部DIV之一。發生這種情況時，我們選擇DIV的內容，然後使用之前建立的功能將其複製到剪貼簿。
附加部分：
<h1> 今天是個好天氣h1> <div id="para">
道衝而用之或不盈，淵兮似萬物之宗。挫其銳，解其紛，和其光，同其塵。湛兮似或存，吾不
知誰之子，象帝之先。
div>br>
<button onclick="handleClick()"> 選擇並顯示文字button> br><h3>endh3> <input type="text" id="email" value="logs whatever textual content the user has selected on the page" style="width:600px;" > br>br> <button onclick="handclickfont5()"> 選擇輸入框的前5個 button><button onclick="handclickend5()"> 選擇輸入框的後5個 button> br><h3>endh3> <textarea id="quote" cols="50" rows="5"> Some text here textarea> <div id="output">div> br><h3>endh3> <span>選中即複製span>
<div id="buddhaquote">
上善若水。水善利萬物而不爭，處眾人之所惡(wù)，故幾(jī)於道。居善地，心善淵，與
善仁，言善信，正善治，事善能，動善時。夫唯不爭，故無尤。
div> br><h3>endh3> <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">Copya> fieldset> br><h3>endh3> <style> .box { display: flex; justify-content:space-around; } .motivate{ border: 1px solid #ccc; background-color: darkgoldenrod; width: 30%; } style> <div id="motivatebox" class="box" style="overflow: hidden; margin: 1em auto">
<div class="motivate">
持而盈之，不如其已。揣(chuǎi)而銳之，不可長保。金玉滿堂，莫之能守。富貴而驕，自遺(
yí)其咎。功成身退，天之道。
div>
<div class="motivate">
五色令人目盲，五音令人耳聾，五味令人口爽，馳騁畋(tián)獵令人心發狂，難得之貨令
人行妨。是以聖人為腹不為目，故去彼取此。
div>
<div class="motivate">
絕聖棄智，民利百倍；絕仁棄義，民復孝慈；絕巧棄利，盜賊無有。此三者，以為文不足，
故令有所屬，見(xiàn)素抱朴，少私寡慾
div> div>
線上演示地址，含所有原始碼：
[點我] https://www.xrmseo.com/copy.html線上地址
