JavaScript实现复制功能(兼容安卓、ios及微信内置浏览器)

最新推荐文章于 2023-11-09 15:27:36 发布

欣喜如狂

最新推荐文章于 2023-11-09 15:27:36 发布

阅读量1.1k

点赞数 3

分类专栏：学习文章标签： javascript html

本文链接：https://blog.csdn.net/qq_42704649/article/details/114366931

版权

学习专栏收录该内容

34 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport">
  <title>复制粘贴功能</title>
</head>
<body>
<ul>
  <li>
    <div>
      <p>一、采用document.execCommand()原生方法---在input里的值</p>
      <input type="text" value="我是input里的原有值" title="test" id="origin-input">
      <button id="origin-input-btn">复制input里的值</button>
    </div>
  </li>
  <li>
    <div>
      <p>二、采用document.execCommand()原生方法---在非input里的值</p>
      <p id="not-input">我不是input</p>
      <button id="not-input-btn">复制P里的值</button>
    </div>
  </li>
  <li>
    <div>
      <p>三、采用插件---clipboard.js</p> https://clipboardjs.com/

    </div>
  </li>
</ul>

<!--<h3>微信页面</h3>-->

<!--<div class="wrapper">-->
  <!--<p id="text">XXXXX</p>-->
  <!--<input type="text" id="input" value="XXXXX" readonly="text"/>-->
  <!--<a href="javascript:;" οnclick="copyText()">点击复制网址</a>-->
<!--</div>-->

<!--<input type="text" value="我是input里的原有值" title="test" id="origin-input">-->

</body>
<script>
  document.getElementById('origin-input-btn').addEventListener('click',function () {
    var originInput = document.querySelector('#origin-input');
    originInput.select();
    originInput.setSelectionRange(0, originInput.value.length); // chrome 不支持
    if (document.execCommand('copy')) {
      document.execCommand('copy');
      alert('复制成功');
    }else {
      alert('你的浏览器不支持复制功能，请升级或更换你的浏览器')
    }
  })

  document.getElementById('not-input-btn').addEventListener('click',function () {
    var createInput =document.createElement('input');
    // 防止键盘被调起
    createInput.setAttribute('readonly','readonly');
    createInput.setAttribute('value',document.getElementById('not-input').innerText);
    document.body.appendChild(createInput);

    createInput.select(); //ios 不支持 但chrome 支持
    createInput.setSelectionRange(0, createInput.value.length); // chrome 不支持 但ios支持
    // alert(createInput.value.length)
    if (document.execCommand('copy')) {
      document.execCommand('copy');
      alert('复制成功');
    }else {
      alert('你的浏览器不支持复制功能，请升级或更换你的浏览器')
    }
    document.body.removeChild(createInput);
  })

//   function copyText() {
//     if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {//区分iPhone设备
//       window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效
//       var Url2=document.getElementById("text");//要复制文字的节点
//       var range = document.createRange();
// // 选中需要复制的节点
//       range.selectNode(Url2);
// // 执行选中元素
//       window.getSelection().addRange(range);
// // 执行 copy 操作
//       var successful = document.execCommand('copy');
// // 移除选中的元素
//       window.getSelection().removeAllRanges();
//       alert("复制成功")
//     }else{
//       var Url2=document.getElementById("input");//要复制文字的节点
//       Url2.select(); // 选择对象
//       document.execCommand("Copy"); // 执行浏览器复制命令
//       alert("复制成功")
//     }
//   }


</script>
</html>