JavaScript 实现复制到剪贴板

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_31126175/article/details/83415562

可编辑区域选中（input,textarea）

方法一

选中时，选中区域会有选中样式

    <p>点击复制后在右边textarea CTRL+V看一下</p>
    <input type="text" id="inputText" value="测试文本"/>
    <input type="button" id="btn" value="复制"/>
    <textarea rows="4"></textarea>
         
    <script>
        var btn = document.getElementById('btn');
        btn.addEventListener('click', function(){
            var inputText = document.getElementById('inputText');
            inputText.select();//选中对象  同样只适用于 input 或者 textarea 文本框
            document.execCommand('copy', true);//浏览器复制命令   方法允许运行命令来操纵可编辑区域的内容。又是可编辑区域
        });
        
    </script>

setSelectionRange
只受用于一些含有value属性的HTML控件，例如单行文本框、多行文本域；

<p>点击复制后在右边textarea CTRL+V看一下</p>
    <input type="text" id="inputText" value="测试文本"/>
    <input type="button" id="btn" value="复制"/>
    <textarea rows="4"></textarea>
         
    <script>
        var btn = document.getElementById('btn');
        btn.addEventListener('click', function(){
            var inputText = document.getElementById('inputText');
            inputText.focus();
            inputText.setSelectionRange(0,inputText.value.length);
            document.execCommand('copy', true);//浏览器复制命令   方法允许运行命令来操纵可编辑区域的内容。又是可编辑区域
        });
    </script>

非文本框

动态创建input 标签并赋值

 <span id='span'>11111111111111</span>
    <input type="button" id="btn" value="复制"/>

    <script language="javascript">
        var btn = document.getElementById('btn');
        var span = document.getElementById('span').innerHTML;
        btn.addEventListener('click', function(){
            const input = document.createElement('input');
            input.setAttribute('value', span);
            input.setAttribute('readonly', 'readonly');
            document.body.appendChild(input);
            input.select();
            let copy = document.execCommand('Copy');
            if(copy){
                alert('复制成功')
            }
            document.body.removeChild(input);
        });
        
    </script>