clipboard.js 是一个网页一键复制插件。
clipboard.js 不需要数十个步骤来配置或数百 KB 的依赖JS,易用、精简。
clipboard.js 不依赖于 Flash 或任何臃肿的框架。
通过 npm 下载依赖。
npm install clipboard --save
也可以直接下载,在HTML中引用。
下载的压缩包是完整的 Git 仓库代码,你只需要使用 dist 目录的内容即可。
官网已经提供了详细使用案例,本文取常用的部分示例。
本文使用的 CDN 直接引用模式。
DEMO地址:http://demo.mebugs.com/clipboard
<!-- clipboard.js依赖 -->
<script src="dist/clipboard.min.js"></script>
支持从 input 框或者 textarea 复制剪切数据。
<!-- 从input框中复制具体的值 -->
<div class="dm">
<input id="d1" value="COPY:www.mebugs.com">
<button class="btn btn1" data-clipboard-target="#d1">复制</button>
</div>
<!-- 从input框中剪切具体的值 -->
<div class="dm">
<input id="d2" value="CUT:www.mebugs.com">
<button class="btn btn2" data-clipboard-action="cut" data-clipboard-target="#d2">剪切</button>
</div>
<!-- clipboard.js依赖 -->
<script src="dist/clipboard.min.js"></script>
<script>
// demo1 从input框中复制具体的值
new ClipboardJS('.btn1');
// demo2 执行剪切行为
new ClipboardJS('.btn2');
</script>
<!-- 无需绑定其他元素,自身指定复制值 -->
<div class="dm">
<button class="btn btn3" data-clipboard-text="COPY SELF:www.mebugs.com">复制指定值</button>
</div>
<!-- clipboard.js依赖 -->
<script src="dist/clipboard.min.js"></script>
<script>
// demo3 自身指定复制值
new ClipboardJS('.btn3');
</script>
利用钩子函数完成自定义的实现。
<!-- 追加自定义的执行逻辑 -->
<div class="dm">
<button class="btn btn4" data-clipboard-text="COPY SELF:www.mebugs.com">复制并弹窗</button>
</div>
<!-- clipboard.js依赖 -->
<script src="dist/clipboard.min.js"></script>
<script>
// demo4 追加自身的执行逻辑
var btn4 = new ClipboardJS('.btn4');
// 成功函数
btn4.on('success', function(e) {
alert("复制行为:"+e.action);
alert("复制内容:"+e.text);
//alert("复制节点:"+e.trigger);
});
// 失败函数
btn4.on('error', function(e) {
alert("复制失败");
});
</script>
DEMO地址:http://demo.mebugs.com/clipboard
官网提供了更多案例。
当前还没有观点发布,欢迎您留下足迹!
在前端页面中文字超出隐藏并添加省略号是比较常见的样式处理,实际CSS样式中单行省略和多行省略的样式有所差异,在某些特殊场景下多行超出的样式会不生效,本文给出相关解决方案
跨站脚本攻击是比较严重的一种攻击行为,恶意脚本注入到相关页面字段中轻易获取敏感信息和向后端发起请求,前端应用应当对请求数据进行编码
Jquery中使用attr()方法动态设置多选框被选中状态时不生效或需要操作多次方可生效的问题可通过prop()替代完成,当需要设置html原生属性时最好使用prop()方法来进行操作
Vue3 中所提供组合 API、ref、reactive、provide、inject几大特性,可以支持完成全局状态管理能力,Vuex 是为 Vue 单独提供的状态管理插件,相对比较笨重,如果项目简单可以尝试替代
多数网站首页的数据往往是最庞大的,三到五秒打开都算比较优秀,因此设置一个开场(预加载)动画特效能够大幅度提升用户感官体验,这里分享本站使用的加载动画,整体比较简约清新
Jquery绑定事件后很多中方式bind()、live()、delegate()、on(),实际应用中比较推荐采用on()的方式去处理,具有较高的自定义组合能力,本文对on()详解