h5实现文字复制并提示复制成功

h5结合jquery实现

 

js

<script>
		//h5复制文本到剪切板
		function copyContentH5(content) {
			var copyDom = document.createElement('div');
			copyDom.innerText=content;
			copyDom.style.position='absolute';
			copyDom.style.top='0px';
			copyDom.style.right='-9999px';
			document.body.appendChild(copyDom);
			//创建选中范围
			var range = document.createRange();
			range.selectNode(copyDom);
			//移除剪切板中内容
			window.getSelection().removeAllRanges();
			//添加新的内容到剪切板
			window.getSelection().addRange(range);
			//复制
			var successful = document.execCommand('copy');
			copyDom.parentNode.removeChild(copyDom);
			try{
				var msg = successful ? "successful" : "failed";
				$('#m-toast-pop').fadeIn();
				setTimeout(function() {
					$('#m-toast-pop').fadeOut();
				}, 2000);
			} catch(err){
				$('#m-toast-inner-text').text("复制失败");
				$('#m-toast-pop').fadeIn();
				setTimeout(function() {
					$('#m-toast-pop').fadeOut();
				}, 2000);
			}
		}

	</script>

<div style="margin-top: 0.5rem">
		        <span class="infoSpan" id ='copy-txt'>复制内容</span>
				<div id="m-toast-pop" class="m-toast-pop">
					<div class="m-toast-inner">
						<div class="m-toast-inner-text" id="m-toast-inner-text">
							复制成功
						</div>
					</div>
				</div>
		        <button onclick="copyContentH5(${item.code})">复制</button>
		    </div>