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

項目中用到了選中複製功能

就是點擊按鈕，複製左側的內容到剪切板，原來一直用的方法是建立一個隱藏的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封裝了不少有用的方法，後續會接着分析。
全部的演示案例在這裏
實例