js自定義復制粘貼內容

 

一篇簡易明了，一看就懂得知識博客，話不多說 開擼。。。

 

 

 

需求如下：

 

復制：   

我是一段話。

粘貼后：

我是一段話。
作者：xxx
鏈接：xxx
來源：博客園

 

四個知識點實現：

1.element.oncopy,用來捕獲復制事件；

 

2.window.getSelection()獲取用戶復制的內容

  1）它返回一個**Selection對象**；

  2）在IE8及以下的瀏覽器上不支持;

  3）我們最終要獲取的是選中區域的純文本，而不是一個Seletion對象。因此需要將Selection對象轉換成字符串，可以通過拼接一個空字符串或使用String.toString()方法。

 

3.clipboardData 的 setData()方法將信息寫入剪貼板；

該對象有三個方法：

getData()方法接受一個format參數，即要取得的數據的格式。數據類型有：text/plain、text/uri-list。

setData()方法授受兩個參數，一個是format參數，代表數據類型。第二個參數代表要放入剪貼板中的文本內容。這里我們可以指定format參數為text/plain，代表純文本。

clearData()方法接受一個可選參數format，代表要刪除的數據類型。如果此參數為空字符串或未提供，則刪除所有類型的數據。

 

4.阻止掉默認復制事件；

 

整體代碼如下：

<script>
        document.oncopy = function (e) {
            // 獲取選區對象
            let selObj = window.getSelection();// IE8及更早不支持window.getSelection
            if (typeof selObj == 'undefined') return false;

            // 獲取clipboardData對象
            // Chrome\Safari\Firefox瀏覽器中,這個對象是event對象的屬性
            // IE瀏覽器中,它是window對象的屬性
            let clipboardData = e.clipboardData || window.clipboardData;

            // 獲取選區文本內容
            let selectedText = selObj + '';
            let copytext = selectedText +
                    '\n\n\n' +
                    '作者：XXX\n' +
                    '鏈接：' + location.href + '\n' +
                    '來源：博客園\n' +
                    '著作權歸作者所有。商業轉載請聯系作者獲取授權，非商業轉載請注明出處。';

            clipboardData.setData('text/plain', copytext);
            
            // 取消默認的復制事件
            return false;
            // e.preventDefault()亦可
            
        }
    </script>

 

 

 

-------------------------------------------------------------------------------

如有錯誤，歡迎評論指正、共同提高。[握手]    

歡迎轉載，轉載請注明：轉載自[ http://www.cnblogs.com/juneling ]