## 剪贴板 剪贴板的功能是复制元素的内容到系统的剪贴板中。 依赖组件[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/)