body {background-color: #c3c3c3}

复制剪切板实现

新版复制剪切板

<span id="article">41144</span>
		<button onclick="copyArticle()" >复制</button>
		<script>
			function copyArticle(event) {
				const range = document.createRange();
				range.selectNode(document.getElementById('article'));
				const selection = window.getSelection();
				if (selection.rangeCount > 0) selection.removeAllRanges();
				selection.addRange(range);
				document.execCommand('copy');
				alert(123)
			}
			// document.getElementById('click-btn').addEventListener('click', copyArticle, false);
			
		</script>

  

 

 

 

1.复制内容到剪切板

  实际就是创造一个text区域 然后 复制这个textarea区域的内容

  <div class="wrapper" style="position:fixed;opacity:0">
   <p id="text"></p>
   <textarea id="input"></textarea>
   <button onclick="copyText()">copy</button>

  

function copyText() {
      var text = document.getElementById("text").innerText;
      var input = document.getElementById("input");
      input.value = lianxi; // 修改文本框的内容
      input.select(); // 选中文本
      document.execCommand("copy"); // 执行浏览器复制命令
    //   alert("复制成功");
    }  

  

HTML 部分

<style type="text/css">
 .wrapper {position: relative;}
 #input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}
</style>
 
<div class="wrapper">
 <p id="text">我把你当兄弟你却想着复制我?</p>
 <textarea id="input">这是幕后黑手</textarea>
 <button onclick="copyText()">copy</button>
</div>
JS 部分


<script type="text/javascript">
 function copyText() {
  var text = document.getElementById("text").innerText;
  var input = document.getElementById("input");
  input.value = text; // 修改文本框的内容
  input.select(); // 选中文本
  document.execCommand("copy"); // 执行浏览器复制命令
  alert("复制成功");
 }
 </script>

  

 

2.判断手机还是PC

var ua = navigator.userAgent.toLowerCase();
            if (/iphone|ipad|ipod/.test(ua)) {
            location.href="https://apps.apple.com/us/app/wink-talk/id1416513073?ls=1"
            } else if (/android/.test(ua)) {
            location.href="https://update.wink.im/apk/wink-talk.apk"
            }

  

posted @ 2020-11-18 10:10  最美胡萝卜  阅读(206)  评论(0)    收藏  举报
body {background-color: #c3c3c3}