<h1>演示:  用纯JavaScript实现“复制到剪贴板”功能</h1>



	<p>点击下面的按钮将会触发JavaScript将元素内容拷贝到剪贴板内。</p>

	<!-- 1. Define some markup -->
	<div>
    <input id="foo" type="text" value="你好clipboard，这里是WebHek.com！(input)">
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">复制</button>
	</div>

	<!-- 1. Define some markup -->
	<div>
    <textarea id="bar">你好clipboard，这里是WebHek.com！(textarea)!</textarea>
    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">剪切</button>
	</div>

	<!-- 1. Define some markup -->
    <div id="div-target">你好clipboard，这里是WebHek.com！(div)!</div>
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#div-target">复制</button>   

   body {
    font-family: "freight-text-pro",Georgia,Cambria,"Times New Roman",Times,serif;
    font-size: 22px;
    line-height: 1.5;
    color: rgba(0,0,0,0.8);
    letter-spacing: .01rem;
    font-weight: 400;
}
   input[type='text'], input[type='password'], textarea {
    border: 1px solid #ccc;
    padding: 3px;
    font-size: inherit;
}
input[type='submit'], button, .button, .pagination a, .actions a, .green-button, #comment-form input[type='submit'] {
    background: #f9f9f9;
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid #eee;
    margin: 0 10px 0 0;
    text-decoration: none;
    cursor: pointer;
    color: #07a;
    margin-bottom: 10px;
}
h1{
    font-size: 32px;
}

  var clipboard = new Clipboard('.btn');

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });