clipboard.js代碼分析(1)-select

li21 發布于2019-08-21 17:46 / 825人閱讀

摘要：下面對它的實現一一分析。可以使用獲取選中的內容也可以使用獲取一個用戶選擇的范圍。在這里完成了對用戶選中內容的一些操作，而且在不是表單無法觸發事件的時候，也可以在指定區域監聽事件來實時獲取選中的內容完成復制等功能。

項目中用到了選中復制功能

就是點擊按鈕，復制左側的內容到剪切板，原來一直用的方法是創建一個隱藏的textarea，把內容填進去，每次都執行select方法，在使用document.execCommand("copy")方法，這次嘗試了一下clipboard.js這個庫感覺還是非常的好用，
還是本著弄懂原理的原則，就讀了一下它的實現代碼，做一下梳理，首先對它引入的select進行了一番分析，這個select是一系列的選中方法，主要針對表單元素和非表單元素進行了不同的處理。下面對它的實現一一分析。
每一種情況都寫了一個實例，放到了文章最后。

如果是 select

這里的select是表單元素下拉框
直接對元素進行focus就可以將其設置為選中狀態

inputDom.focus()

如果是 input 或者 textarea

那么只需要執行select 或者 setSelectionRange即可
直接調用select方法是選中所有文本，如果想要知道用戶選中的文本的內容可以使用dom對象的select事件且配合selectionStart， selectionEnd獲取用戶選擇的部分內容

inputDom.value.substring(inputDom.selectionStart,inputDom.selectionEnd);

inputDom.addEventListener("select", function() {
    inputDom.value.substring(inputDom.selectionStart,inputDom.selectionEnd);
})

配合復制的功能，就可以實現選中即復制的效果了，復制的功能后面文章會說。
也可以直接選擇部分文本，這就要使用setSelectionRange方法，這個方法可以接收起始位置，終止位置，和方向
要看到選擇的文本，必須在調用 setSelectionRange()之前或之后立即將焦點設置到文本框

inputDom.focus();
inputDom.setSelectionRange(2,5); // 選擇特定部分
inputDom.setSelectionRange(0, -1); // 全選 
inputDom.setSelectionRange(0, input.value.length); // 全選

為了在直接選中的時候文本不是在可編輯狀態，可以增加保護，在執行select或者setSelectionRange的時候，使得文本處于只讀狀態

var isReadOnly = element.hasAttribute("readonly");
if (!isReadOnly) {
  element.setAttribute("readonly", "");
}
element.select();
element.setSelectionRange(0, element.value.length);
element.removeAttribute("readonly");

其他DOM元素

如果不是表單元素，就需要使用getSelection 和 createRange方法了
getSelection 返回一個 Selection 對象，表示用戶選擇的文本范圍或光標的當前位置。
可以使用document.getSelection().toString()獲取選中的內容,也可以使用document.getSelection().getRangeAt()獲取一個用戶選擇的范圍。當然還有很多API，可以參考MDN鏈接。在這里完成了對用戶選中內容的一些操作，而且在不是表單無法觸發select事件的時候，也可以在指定區域監聽keyup事件來實時獲取選中的內容完成復制等功能。
但是還不能處理瀏覽器主動選中，有的時候，我們需要點擊按鈕去復制指定區域或者元素的內容，就是本文剛開始說的情況，這就需要createRange方法了，createRange返回一個Range對象，Range表示包含節點和部分文本節點的文檔片段。在這里常用的是對DOM的文本進行一個Range片段的設置，可以使用Range.selectNodeContents()方法，最后使用Selection提供的addRange方法將創建的Range添加進去，為了保證選擇的區域唯一，可以使用selection.removeAllRanges()

 var selection = window.getSelection();
 var range = document.createRange();
 range.selectNodeContents(element);
 selection.removeAllRanges();
 selection.addRange(range);
 selectedText = selection.toString();

簡單復制

最后只需要執行document.execCommand("copy")就可以復制內容了，當然clipboard.js封裝了很多有用的方法，后續會接著分析。
所有的演示案例在這里
實例

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89976.html

clipboard.js代碼分析(2)-emitter

摘要：用于在同一主模塊下的不同子模塊以及不同主模塊之間的通信，支持動態綁定作用域。如果用過的父子組件事件通信以及，對事件管理器應該不會陌生的。而且支持指定作用域，可以遠程調用任意模塊的函數。上一篇文章介紹了clipboard.js這個工具庫中的第一個依賴select這個工具庫主要完成了對任意DOM元素的復制到粘貼板的功能。這次介紹一下clipboard.js源碼中的第二個依賴的輕型工具庫t...

MoAir 2019-08-22 15:04 評論0 收藏0
JavaScript復制內容到剪貼板

摘要：原文鏈接最近一個活動頁面中有一個小需求，用戶點擊或者長按就可以復制內容到剪貼板，記錄一下實現過程和遇到的坑。完整代碼如下復制成功總結以上就是關于如何實現復制內容到剪貼板，附上幾個鏈接兼容性原文鏈接：https://github.com/axuebin/ar... 最近一個活動頁面中有一個小需求，用戶點擊或者長按就可以復制內容到剪貼板，記錄一下實現過程和遇到的坑。常見方法查了一下...

ideaa 2019-08-22 14:54 評論0 收藏0
移動端復制文本到粘貼板，clipboard.js的使用，移動端與PC端復制粘貼兼容寫法

摘要：首先引用文本文檔要用復制按鈕要用去掉文字檢查，不可編輯，插件自帶的屬性樣式代碼至此，兼容移動端和端的復制粘貼功能完美實現，感謝作者作者來源原文版權聲明本文為博主原創文章，轉載請附上博文鏈接 1.首先引用clipboard.js 2.html 文本文檔要用textarea,復制按鈕要用button 9999999 spellcheck=false去掉文字檢查，readonly不可編輯...

legendmohe 2019-08-23 16:28 評論0 收藏0
移動端復制文本到粘貼板，clipboard.js的使用，移動端與PC端復制粘貼兼容寫法

摘要：首先引用文本文檔要用復制按鈕要用去掉文字檢查，不可編輯，插件自帶的屬性樣式代碼至此，兼容移動端和端的復制粘貼功能完美實現，感謝作者作者來源原文版權聲明本文為博主原創文章，轉載請附上博文鏈接 1.首先引用clipboard.js 2.html 文本文檔要用textarea,復制按鈕要用button 9999999 spellcheck=false去掉文字檢查，readonly不可編輯...

Caicloud 2019-08-02 16:09 評論0 收藏0