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   />
	<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 原生实现复制功能

相关推荐
