面试网站开发员,怎样做企业文化网站,制作视频模板,wordpress 转为中文版一、Clipboard.js简介
Clipboard.js是一个轻量级的实现复制文本到剪贴板功能的JavaScript插件#xff0c;该插件可以将输入框#xff0c;文本域#xff0c;DOM节点元素中的文本内容复制到剪贴板中。 官网地址#xff1a;Clipboard.js 浏览器兼容性#xff1a;兼容Chrome、…一、Clipboard.js简介
Clipboard.js是一个轻量级的实现复制文本到剪贴板功能的JavaScript插件该插件可以将输入框文本域DOM节点元素中的文本内容复制到剪贴板中。 官网地址Clipboard.js 浏览器兼容性兼容Chrome、Firefox、Opera、Safari、IE9
二、Clipboard.js安装
2.1、NPM安装
你可以在 npm 上获取它 npm install clipboard --save
2.2、ZIP安装
如果您不喜欢包管理只需下载ZIP文件即可Clipboard.js的ZIP文件。
三、使用Clipboard.js
3.1、在页面引入clipboard.js
script srcjs/node_modules/clipboard/dist/clipboard.js typetext/javascript/script现在你需要通过传递 DOM 选择器、HTML 元素或 HTML 元素列表来实例化它。
3.2、从元素属性复制文本
事实是您甚至不需要其他元素来复制其内容。您可以只在 trigger 元素中包含一个属性data-clipboard-text。
a hrefjavascript:; classbtn idcopyBtn data-clipboard-text复制测试内容复制/a3.2.1、执行JS事件
script typetext/javascriptlet isCompatible ClipboardJS.isSupported();//--------这句为是否兼容if (isCompatible) {let clipboard new ClipboardJS(#copyBtn);clipboard.on(success, function (e) {console.log(e.text);$(#bar).val(e.text);console.log(文本已经复制到剪贴板);});clipboard.on(error, function (e) {let cpoy_text e.text;if (!cpoy_text) {alert(需要复制或剪切的内容为空);}});}
/script3.2.2、执行JS事件效果 3.3、从其他元素剪切文本
此外您还可以定义一个属性来指定是否要 或 content。data-clipboard-actioncopycut如果省略此属性则默认使用copy
3.2.1、HTML代码
textarea name idbar/textarea
a hrefjavascript:; classbtn idcopyBtn data-clipboard-actioncut data-clipboard-target#bar复制/a3.3.2、执行JS事件
script typetext/javascriptlet isCompatible ClipboardJS.isSupported();//--------这句为是否兼容if (isCompatible) {let clipboard new ClipboardJS(#copyBtn);clipboard.on(success, function (e) {console.log(e.text);$(#bar).val(e.text);console.log(文本已经复制到剪贴板);});clipboard.on(error, function (e) {let cpoy_text e.text;if (!cpoy_text) {alert(需要复制或剪切的内容为空);}});}
/script3.3.3、执行JS事件效果 3.4、以下是完整的HTML代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleClipboard.js实现复制文本到剪贴板功能/titlescript srcjs/node_modules/jquery/dist/jquery.js typetext/javascript/scriptscript srcjs/node_modules/clipboard/dist/clipboard.js typetext/javascript/script
/headbody!-- 从其他元素剪切文本 --textarea name idbar/textareaa hrefjavascript:; classbtn idcopyBtn data-clipboard-actioncut data-clipboard-target#bar复制/a!-- 从元素属性复制文本 --a hrefjavascript:; classbtn idcopyBtn data-clipboard-text复制测试内容复制/atextarea name idbar/textarea/body/html
script typetext/javascriptlet isCompatible ClipboardJS.isSupported();//--------这句为是否兼容if (isCompatible) {let clipboard new ClipboardJS(#copyBtn);clipboard.on(success, function (e) {console.log(e.text);$(#bar).val(e.text);console.log(文本已经复制到剪贴板);});clipboard.on(error, function (e) {let cpoy_text e.text;if (!cpoy_text) {alert(需要复制或剪切的内容为空);}});}
/script
