1. 程式人生 > >前端學習(八十四) DOM-剪下板(Dom)

前端學習(八十四) DOM-剪下板(Dom)

Selection

是一個全域性物件,通過window.getSelection()獲得,代表當前使用者在網頁上選擇的文字範圍或游標所在的位置

方法

Selection.toString()

獲得選中文字的字串

window.getSelection().toString()

HTMLInputElement.setSelectionRange

在input元素上的複製

inputElement.setSelectionRange(selectionSatrt,selectionEnd,selectionDirection)

  • selectionSatrt:選擇區域的起始位置(包括起始位置)
  • selectionEnd:選擇區域的結束位置(不包括結束位置)
  • selectionDirection:方向,有三個值,代表是從後往前還是從前往後,該是未知

Document.execCommand

該方法允許允許命令來操作可編輯區域的內容

bool = document.execCommand(aCommandName,aShowDefaultUI,aValueArgument)

  • aCommandName:命令的名稱
  • aShowDefaultUI:是否展示使用者介面,一般為false
  • aValueArgument:額外引數,因為有些特殊命令需要引數,預設為Null

返回值:boolean值,如果是false,則代表操作不被支援

複製的命令

document.execCommand(‘copy’,true)

        <p>
                優酷由古永鏘在2006年6月21日創立 [1]  。2006年06月21日正式上線。 [2]  優酷現為阿里巴巴文化娛樂集團大優酷事業群下的視訊平臺。 [3]  目前,優酷、土豆兩大視訊平臺覆蓋5.8億多屏終端、日播放量11.8億,支援PC、電視、移動三大終端,兼具版權、合制、自制、自頻道、直播、VR等多種內容形態。業務覆蓋會員、遊戲、支付、智慧硬體和藝人經紀,從內容生產、宣發、營銷、衍生商業到粉絲經濟,貫通文化娛樂全鏈路。 [4] 
                2016年12月21日,優酷宣佈啟動全新品牌標識系統。新LOGO色彩更明亮、設計更簡潔、更動感,煥發十足年輕氣息,優酷APP的圖示也煥新為一個由紅藍兩點動感旋轉的播放按鈕。新標識寓意萬千精彩都始於最初兩點間的連線和互動,每次觸碰都會引發無限可能。同時,優酷的品牌主張也更新為“這世界很酷”,用一個充滿好奇感的年輕聲音,發出對這個精彩世界的讚歎。 [5] 
                有影響力的內容是優酷引領文化娛樂產業的核心能力。奉行佈局型別化、內容品牌化、排播自主化的策略,以3+X(3為歡樂喜劇、燃血青春、純美絕戀,X為超級熱劇)為方向持續打造爆款劇集,搭建6+V(6為脫品秀、喜劇、真人秀、親子類、偶像養成、音樂,V為垂直爆款)的綜藝新矩陣,建立自主排播體系,為業務健康發展打下堅實基礎。 [6] 
                2018年7月12日,優酷起訴有票劫持2018世界盃流量,索賠300萬元。 [7] 
        </p>
        <input type="button" id="btn" value="複製">
        <div id="textid">

        </div>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <script>
            let btn=document.getElementById('btn');
            btn.addEventListener('click',function (params) {
                let select= window.getSelection().toString();
                console.log(select);
                if(select !== ''){
                    let bool=document.execCommand('copy',true);
                    if(bool){
                        //複製在瀏覽器剪下板
                        //document.execCommand('copy',true);
                        //直接填入目標
                        document.getElementById('textid').innerHTML = select
                    }
                    else{
                        console.log('您使用的瀏覽器不支援複製');
                        
                    }
                }
                else{
                    console.log('沒有選中');
                    
                }
            })
        </script>