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
官网提供了更多案例。
当前还没有观点发布,欢迎您留下足迹!
在业务中我们会出现不同的项目依赖与不同版本的 node.js,总不能每次跑项目的时候都去重新安装对应版本的 node.js 和依赖,使用 nvm 可以让多个版本的 node.js 共存,并提供管理和切换
自Jquery1.7起,on()方法是 bind()、live()、delegate() 方法的新的替代品,我们推荐使用on()来处理业务中的事件绑定,通过理解这些方法的差异能够更加清晰明白使用on()方法的优势所在
严谨的页面开发需要着重关注前台校验相关的内容,确保请求参数的合法以保证服务器安全,界面参数众多需要建立一个公共方法,公共校验器的核心方法是Jquery.bind()
绝大多数网站都会有个顶部导航,对于手机端而言为了便于访问导航常常会做固顶操作,通过CSS样式配合Jquery的scroll()方法或原生JS监听滑动事件方法,可以轻松实现下滑隐藏,上滑显示的效果
跨站脚本攻击是比较严重的一种攻击行为,恶意脚本注入到相关页面字段中轻易获取敏感信息和向后端发起请求,前端应用应当对请求数据进行编码
HTML 中加载 SVG 有很多种方式,但如果需要在 HTML 中通过 CSS 样式自由控制 SVG 样式就必须将 svg 标签插入网页找那个成为 DOM 的一部分,本文借助 SVGInject 插件可以快速完成这一操作