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

cenfeng發表於2019-07-19
JavaScript

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

使用JavaScript讀取所選文字並將其複製到剪貼簿  檢索使用者選擇的文字內容

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

1
2
3
4
五
6
7
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" > function getSelectionText（）{</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     var selectedText =“”</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     if （window.getSelection）{ //所有現代瀏覽器和IE9 +</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
         selectedText = window.getSelection（）。toString（）</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     }</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     return selectedText</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
}</font></font>

window.getSelection() 返回頁面上當前選定的文字，並返回 包含該資料 的 物件。 要檢索實際文字，我們使用 它將其轉換為字串。 以下示例 在使用者將滑鼠懸停在文件上時 呼叫我們的函式 ，以便檢視使用者選擇了什麼（如果有的話）： Selection toString() getSelectionText()

1
2
3
4
五
6
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >document.addEventListener（ 'mouseup' ， function （）{</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     var thetext = getSelectionText（）</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     if （thetext.length> 0）{ //檢查是否選擇了一些文字</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
         console.log（thetext） //記錄使用者在頁面上選擇的任何文字內容</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
     }</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
}， false ）</font></font>

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


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69933200/viewspace-2651146/，如需轉載，請註明出處，否則將追究法律責任。

相關文章