資訊專欄INFORMATION COLUMN
摘要：下面對它的實(shí)現(xiàn)一一分析?？梢允褂毛@取選中的內(nèi)容也可以使用獲取一個(gè)用戶選擇的范圍。在這里完成了對用戶選中內(nèi)容的一些操作，而且在不是表單無法觸發(fā)事件的時(shí)候，也可以在指定區(qū)域監(jiān)聽事件來實(shí)時(shí)獲取選中的內(nèi)容完成復(fù)制等功能。
項(xiàng)目中用到了選中復(fù)制功能
就是點(diǎn)擊按鈕，復(fù)制左側(cè)的內(nèi)容到剪切板，原來一直用的方法是創(chuàng)建一個(gè)隱藏的textarea，把內(nèi)容填進(jìn)去，每次都執(zhí)行select方法，在使用document.execCommand("copy")方法，這次嘗試了一下clipboard.js這個(gè)庫感覺還是非常的好用，
還是本著弄懂原理的原則，就讀了一下它的實(shí)現(xiàn)代碼，做一下梳理，首先對它引入的select進(jìn)行了一番分析，這個(gè)select是一系列的選中方法，主要針對表單元素和非表單元素進(jìn)行了不同的處理。下面對它的實(shí)現(xiàn)一一分析。
每一種情況都寫了一個(gè)實(shí)例，放到了文章最后。
這里的select是表單元素下拉框
直接對元素進(jìn)行focus就可以將其設(shè)置為選中狀態(tài)
inputDom.focus()如果是 input 或者 textarea
那么只需要執(zhí)行select 或者 setSelectionRange即可
直接調(diào)用select方法是選中所有文本，如果想要知道用戶選中的文本的內(nèi)容可以使用dom對象的select事件且配合selectionStart， selectionEnd獲取用戶選擇的部分內(nèi)容
inputDom.value.substring(inputDom.selectionStart,inputDom.selectionEnd);
inputDom.addEventListener("select", function() {
inputDom.value.substring(inputDom.selectionStart,inputDom.selectionEnd);
})
配合復(fù)制的功能，就可以實(shí)現(xiàn)選中即復(fù)制的效果了，復(fù)制的功能后面文章會說。
也可以直接選擇部分文本，這就要使用setSelectionRange方法，這個(gè)方法可以接收起始位置，終止位置，和方向
要看到選擇的文本， 必須在調(diào)用 setSelectionRange()之前或之后立即將焦點(diǎn)設(shè)置到文本框
inputDom.focus(); inputDom.setSelectionRange(2,5); // 選擇特定部分 inputDom.setSelectionRange(0, -1); // 全選 inputDom.setSelectionRange(0, input.value.length); // 全選
為了在直接選中的時(shí)候文本不是在可編輯狀態(tài)，可以增加保護(hù)，在執(zhí)行select或者setSelectionRange的時(shí)候，使得文本處于只讀狀態(tài)
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 返回一個(gè) Selection 對象，表示用戶選擇的文本范圍或光標(biāo)的當(dāng)前位置。
可以使用document.getSelection().toString()獲取選中的內(nèi)容,也可以使用document.getSelection().getRangeAt()獲取一個(gè)用戶選擇的范圍。當(dāng)然還有很多API，可以參考MDN鏈接。在這里完成了對用戶選中內(nèi)容的一些操作，而且在不是表單無法觸發(fā)select事件的時(shí)候，也可以在指定區(qū)域監(jiān)聽keyup事件來實(shí)時(shí)獲取選中的內(nèi)容完成復(fù)制等功能。
但是還不能處理瀏覽器主動選中，有的時(shí)候，我們需要點(diǎn)擊按鈕去復(fù)制指定區(qū)域或者元素的內(nèi)容，就是本文剛開始說的情況，這就需要createRange方法了，createRange返回一個(gè)Range對象，Range表示包含節(jié)點(diǎn)和部分文本節(jié)點(diǎn)的文檔片段。在這里常用的是對DOM的文本進(jìn)行一個(gè)Range片段的設(shè)置，可以使用Range.selectNodeContents()方法，最后使用Selection提供的addRange方法將創(chuàng)建的Range添加進(jìn)去，為了保證選擇的區(qū)域唯一，可以使用selection.removeAllRanges()
var selection = window.getSelection(); var range = document.createRange(); range.selectNodeContents(element); selection.removeAllRanges(); selection.addRange(range); selectedText = selection.toString();簡單復(fù)制
最后只需要執(zhí)行document.execCommand("copy")就可以復(fù)制內(nèi)容了，當(dāng)然clipboard.js封裝了很多有用的方法，后續(xù)會接著分析。
所有的演示案例在這里
實(shí)例
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89976.html
摘要：用于在同一主模塊下的不同子模塊以及不同主模塊之間的通信，支持動態(tài)綁定作用域。如果用過的父子組件事件通信以及，對事件管理器應(yīng)該不會陌生的。而且支持指定作用域，可以遠(yuǎn)程調(diào)用任意模塊的函數(shù)。 上一篇文章介紹了clipboard.js這個(gè)工具庫中的第一個(gè)依賴select這個(gè)工具庫主要完成了對任意DOM元素的復(fù)制到粘貼板的功能。這次介紹一下clipboard.js源碼中的第二個(gè)依賴的輕型工具庫t...
摘要：原文鏈接最近一個(gè)活動頁面中有一個(gè)小需求，用戶點(diǎn)擊或者長按就可以復(fù)制內(nèi)容到剪貼板，記錄一下實(shí)現(xiàn)過程和遇到的坑。完整代碼如下復(fù)制成功總結(jié)以上就是關(guān)于如何實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板，附上幾個(gè)鏈接兼容性 原文鏈接：https://github.com/axuebin/ar... 最近一個(gè)活動頁面中有一個(gè)小需求，用戶點(diǎn)擊或者長按就可以復(fù)制內(nèi)容到剪貼板，記錄一下實(shí)現(xiàn)過程和遇到的坑。 常見方法 查了一下...
摘要：首先引用文本文檔要用復(fù)制按鈕要用去掉文字檢查，不可編輯，插件自帶的屬性樣式代碼至此，兼容移動端和端的復(fù)制粘貼功能完美實(shí)現(xiàn)，感謝作者作者來源原文版權(quán)聲明本文為博主原創(chuàng)文章，轉(zhuǎn)載請附上博文鏈接 1.首先引用clipboard.js 2.html 文本文檔要用textarea,復(fù)制按鈕要用button 9999999 spellcheck=false去掉文字檢查，readonly不可編輯...
摘要：首先引用文本文檔要用復(fù)制按鈕要用去掉文字檢查，不可編輯，插件自帶的屬性樣式代碼至此，兼容移動端和端的復(fù)制粘貼功能完美實(shí)現(xiàn)，感謝作者作者來源原文版權(quán)聲明本文為博主原創(chuàng)文章，轉(zhuǎn)載請附上博文鏈接 1.首先引用clipboard.js 2.html 文本文檔要用textarea,復(fù)制按鈕要用button 9999999 spellcheck=false去掉文字檢查，readonly不可編輯...
閱讀 3297·2021-11-15 11:37
閱讀 2485·2021-09-29 09:48
閱讀 3870·2021-09-22 15:55
閱讀 3048·2021-09-22 10:02
閱讀 2670·2021-08-25 09:40
閱讀 3267·2021-08-03 14:03
閱讀 1731·2019-08-29 13:11
閱讀 1595·2019-08-29 12:49
