## 剪貼板 剪貼板的功能是復制元素的內容到系統的剪貼板中。 依賴組件[https://clipboardjs.com/](https://clipboardjs.com/) ## 目錄 [TOC] ## 復制表單值 通過設置 `data-clipboard-target` 屬性用于設置復制的表單。 ``` <input id="foo" value="https://github.com/zenorocha/clipboard.js.git" class="form-control"> <button class="btn btn-default" data-clipboard-target="#foo">復制</button> <script> require(['hdjs'], function (hdjs) { var clipboard = hdjs.clipboard('.btn', {},function (e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); hdjs.notify('復制成功'); e.clearSelection(); }) }) </script> ``` ## 復制元素屬性 通過設置 `data-clipboard-text` 屬性用于指定剪貼板中的內容。 ``` <a href="javascript:;" class="copy" data-clipboard-text="我是復制的內容">點我復制</a> <script> require(['hdjs'], function (hdjs) { hdjs.clipboard('.copy',{},function(e){ hdjs.notify('復制成功'); e.clearSelection(); }) }); </script> ``` ## 動態設置 `text` 選項函數返回的內容記得到剪貼板中。 ``` <div class="input-group mb-3"> <input type="text" class="form-control" name="content" value="后盾人 人人做后盾 houdunren.com" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"> <div class="input-group-append"> <button class="btn btn-outline-secondary hdphp" type="button">復制指定表單內容</button> </div> </div> <script> require(['hdjs'], function (hdjs) { hdjs.clipboard('.hdphp', { //函數返回內容將保存在剪貼板中 text: function (trigger) { return $("[name='content']").val(); } }, function (e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); e.clearSelection(); }) }) </script> ``` > 其他具體使用請閱讀 [參考文檔](https://clipboardjs.com/)