前端学习（八十四） 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>

前端学习（八十四） DOM-剪切板（Dom）

猜你喜欢