扫一扫分享
复制文字到剪切板不应该很难去实现。它不需要配置几十个步骤或者加载几百 KB 的文件。最重要的是,它不应该依赖 Flash 或其他臃肿的框架。这是 clipboard.js 诞生的原因。
浏览器兼容IE9以及IE9+和其他新版浏览器。clipboard调用方法友好,实现方式多样,亦可自定义文本获取方案。
npm install clipboard --save
首先需要您需要通过传递dom选择器,html元素或HTML元素列表来实例化它。
new Clipboard('.btn');
1用一个元素当触发器来复制另一个元素的文本,data-clipboard-target属性后需要跟属性选择器
<!-- Target --> <input id="foo" value="https://github.com/zenorocha/clipboard.js.git"> <!-- Trigger --> <button data-clipboard-target="#foo"> </button>
另外还有另外一个属性data-clipboard-action属性,以指定是要要么copy还是要cut操作。默认情况下是copy。cut操作只适用于<input>或<textarea>元素。
<!-- Target --> <textarea id="bar">Mussum ipsum cacilds...</textarea> <!-- Trigger --> <button data-clipboard-action="cut" data-clipboard-target="#bar"> Cut to clipboard </button>
2从属性中复制文本,不需要另一个元素当触发器,可以使用data-clipboard-text属性,在后面放上需要复制的文本.
<button data-clipboard-text="Just because you can doesn't mean you should — clipboard.js"> Copy to clipboard </button>
手机预览