沐鳴註冊平台官網_原生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;width: 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>

站長推薦

1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/6854