前端學習(八十四) DOM-剪下板(Dom)
阿新 • • 發佈:2018-12-28
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>