JavaScript 实现复制到剪贴板

最新推荐文章于 2023-04-17 13:54:11 发布

原创最新推荐文章于 2023-04-17 13:54:11 发布 · 426 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用JavaScript实现网页中input、textarea及非文本框元素的复制功能，包括使用select()和setSelectionRange()方法，以及为非文本框元素动态创建input标签进行复制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可编辑区域选中（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>