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

lxf 2021年08月26日编程语言 385 0

<!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>