码迷,mamicode.com
首页 > 其他好文 > 详细

h5 原生实现复制功能

时间:2019-03-12 12:00:17      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:put   select   his   pat   range   utf-8   onclick   var   png   

技术图片

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

标签:put   select   his   pat   range   utf-8   onclick   var   png   

原文地址:https://www.cnblogs.com/xiaobaicai123/p/10515611.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!