zoukankan      html  css  js  c++  java
  • 原生js实现复制内容到剪切板,兼容pc、移动端(支持Safari浏览器)

    在开发中经常会遇到这样的需求,第一种就是点击复制当前页面的链接,第二种就是类似卡券的功能,需要复制密码等等。
    
    在网上看到有很多该功能的实现代码,除了插件clipboard.js、ZeroClipboar兼容性较好以外,其他大部分在safari,ios上的微信端这些并不兼容。那么在不使用插件的情况下,为大家整理了一份较为兼容的实现方式:纯js实现复制文本并提示复制成功(干货)适用所有浏览器,直接放项目就能用。 
    

    代码如下:

    <a onclick="copyTxt('这是要复制的内容哦')">点击复制</a>
    

    js:

    <script>
    //原生js实现复制内容到剪切板,兼容pc、移动端(支持Safari浏览器)
    function copyTxt(text){
    	if(typeof document.execCommand!=="function"){
    		alert("复制失败,请长按复制");
    		return;
    	}
    	var dom = document.createElement("textarea");
    	dom.value = text;
    	dom.setAttribute('style', 'display: block; 1px;height: 1px;');
    	document.body.appendChild(dom);
    	dom.select();
    	var result = document.execCommand('copy');
    	document.body.removeChild(dom);
    	if (result) {
    		alert("复制成功");
    		return;
    	}
    	if(typeof document.createRange!=="function"){
    		alert("复制失败,请长按复制");
    		return;
    	}
    	var range = document.createRange();
    	var div=document.createElement('div');
    	div.innerHTML=text;
    	div.setAttribute('style', 'height: 1px;fontSize: 1px;overflow: hidden;');
    	document.body.appendChild(div);
    	range.selectNode(div);
    	const selection = window.getSelection();
    	if (selection.rangeCount > 0){
    		selection.removeAllRanges();
    	}
    	selection.addRange(range);
    	document.execCommand('copy');
    	alert("复制成功")
    }
    </script>
    
  • 相关阅读:
    排列组合STL实现——pku1731
    迷宫搜索变型——【USACO5.2.1】蜗牛的旅行
    知道地球两点算距离——fzu2016
    最长递增子序列——pku2533
    dfs+dp——[Usaco2008 Mar]Cow Travelling游荡的奶牛
    最长不降子序列变型——[Usaco2008 Feb]Eating Together麻烦的聚餐
    规律题——[Usaco2008 Oct]建造栅栏
    简单dp——[Usaco2008 Mar]River Crossing渡河问题
    poj1317
    poj1068
  • 原文地址:https://www.cnblogs.com/rwxwsblog/p/13044142.html
Copyright © 2011-2022 走看看