h5 原生实现复制功能

Posted 2021-02-14 xiaobaicai123

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了h5 原生实现复制功能相关的知识，希望对你有一定的参考价值。

技术图片

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>demo</title>
	
</head>
<body>

<div>
	<input id="copy" type="text" value="copy1122221"  />
	<button>点击复制</button>
</div>

<ul>
	<li><input type="text" value="aaaaaa" /></li>
	<li><input type="text" value="bbbbb" /></li>
	<li><input type="text" value="cccccc" /></li>
</ul>



<script>
	var els = {
		copy: document.getElementById(‘copy‘),
		btn: document.querySelector(‘button‘),
		ul: document.querySelector(‘ul‘),
		li: document.querySelectorAll(‘li‘)
	};

	els.btn.onclick = function() {
		myCopy(els.copy);
	}

	for (var i = 0, len = els.li.length; i < len; i++) {
		els.li[i].onclick = function() {
			var _this = this.querySelector(‘input‘);
			myCopy(_this);
		};
	}


	function myCopy(ele){ 
        ele.focus();
        ele.setSelectionRange(0, ele.value.length); 
        document.execCommand(‘copy‘, false, null); 
    }
</script>

</body>
</html>

以上是关于h5 原生实现复制功能的主要内容，如果未能解决你的问题，请参考以下文章

H5 兼容IOS安卓的原生Js复制功能

如何辨别app是原生开发的还是h5开发的或是混合开发