欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

点击复制到剪切板

程序员文章站 2022-07-05 15:35:43
点击复制到剪切板,兼容性很好,可以自定义样式,加以美化。 ......

点击复制到剪切板,兼容性很好,可以自定义样式,加以美化。

<!doctype html>    
<html lang="en">    
<head>    
    <meta charset="utf-8">          
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>点击复制到剪切板</title>
</head>    
<body>    

<h2>点击粘贴出现《我被复制了》</h2>

<button id="clip_button" onclick="copynum()">点击复制到剪切板</button><br/><br/>

<!-- 测试是否复制 -->
<textarea></textarea>

<!-- 将复制内容隐藏 -->
<input type="text" id="clip_num" style="width:1px;height:1px;position:absolute;top:-10px;left:-10px" value="我被复制了">


<script>
    // 思路:要想复制到剪贴板,必须先选中这段文字。
    function copynum(){
        var numclip=document.getelementbyid("clip_num");
        var nvalue=numclip.value;
        var valuelength = nvalue.length;
        selecttext(numclip, 0, valuelength);
        if(document.execcommand('copy', false, null)){
            document.execcommand('copy', false, null)// 执行浏览器复制命令
            console.log("已复制,赶紧分享给朋友吧");
        }else{
            console.log("不兼容");
        }
    }
    // input自带的select()方法在苹果端无法进行选择,所以需要自己去写一个类似的方法
    // 选择文本。createtextrange(setselectionrange)是input方法
    function selecttext(textbox, startindex, stopindex) {
        if(textbox.createtextrange) {//ie
            var range = textbox.createtextrange();
            range.collapse(true);
            range.movestart('character', startindex);//起始光标
            range.moveend('character', stopindex - startindex);//结束光标
            range.select();//不兼容苹果
        }else{//firefox/chrome
            textbox.setselectionrange(startindex, stopindex);
            textbox.focus();
        }
    }
/*兼容性补充:
    移动端:
    安卓手机:微信(chrome)和几个手机浏览器都可以用。 
    苹果手机:微信里面和sarafi浏览器里也都可以,  
  pc端:sarafi版本必须在10.2以上,其他浏览器可以.
    兼容性测试网站:https://www.caniuse.com/
 */
</script>
</body> 
</html>