2018-05-28最新兼容ios和andorid的复制粘贴方法

最新推荐文章于 2022-02-09 17:40:02 发布

乐橙Web

最新推荐文章于 2022-02-09 17:40:02 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：工作网页特效日常积累项目笔记

本文链接：https://blog.youkuaiyun.com/Mr_YanYan/article/details/80488331

项目笔记同时被 2 个专栏收录

13 篇文章

订阅专栏

工作网页特效日常积累

11 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现将指定文本复制到剪贴板的方法。通过设置input元素的位置和透明度，使其不可见的同时仍能被选中，进而利用document.execCommand('copy')实现复制功能。

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

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        input{
            position:absolute;
            top:0;
            left:-200px;
            color:transparent;
            background: transparent;
        }
    </style>
</head>
<body>
    <input type="text" readonly="true" value="你阿达来垃圾袋爱上邓丽君">
    <button>复制到剪切板</button>
</body>
<script>
     var oPara = document.getElementsByTagName("input")[0];
     var oButton = document.getElementsByTagName("button")[0];
     oButton.onclick = function(){
          //  oPara.select();//ios不支持这种方法，但并不报错
         oPara.setSelectionRange(0,oPara.value.length);//安卓和ios都支持
         document.execCommand('copy');
     }
</script>
</html>