js简单复制功能

    之前休息时候写了一个分享功能模块,里面有一个复制按钮分享一下。

html：

<div style="position: fixed;top: 50%;left: 50%;margin:-100px 0 0 -100px">
			<input type="text" name="" id="text" value="" class="share-url" />
			<span>
				<button type="button" class="btn btn-info copy" onclick="copy()">复制链接</button>
                <textarea id="input" style="opacity: 0; height: 1px;">这是幕后黑手</textarea>
			</span>

		</div>

 

 

 

原理就是点击复制时候把input的val拿到赋值个textarea，然后调用浏览器的复制命令。

 

 

 

js：

 

function copy() {
				var text = document.getElementById("text").value
				var input = document.getElementById("input");
				input.value = text
				input.select(); 
				document.execCommand("copy"); 
			}

style:

.copy {
				display: inline-block;
				padding: 6px 12px;
				margin-bottom: 0;
				font-size: 14px;
				font-weight: 400;
				color: #fff;
				background-color: #5bc0de;
				border-color: #46b8da;
				border: 1px solid transparent;
				border-radius: 4px;
			}
			
			#text {
				margin-bottom: 10px;
				width: 40%;
				padding: 6px;
				border: 1px solid #666;
			}