击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

用户点击或者长按就可以将内容复制到剪贴板，这个功能很常见，实现起来却有一些讲究。下面我来简单总结一下它的实现方法和存在的一些问题是如何解决的。

实现这个功能基本上就是两种方法：

1.使用第三方库：clipboard.js（https://clipboardjs.com/）

2.原生方法：document.execCommand()

接下来，分别搞个demo来用一下。

一、clipboard.js

打开官网，可以看一下，和通常的模块一样，有两种引用方式：

1、引用js文件

2、npm install

实例化：

这里演示一下DEMO，就别下载了，直接引用CDN的地址就行。

demo的代码结构如下：

从上面这段代码可以看到，在button标签中添加了一个data-clipboard-target属性，它的值是需要复制input的ID，顾名思义是从整个标签中复制内容。上面这段代码就实现了，点击BUTTON时，将INPUT里的VALUE值复制到了剪贴板。

回调事件：

有的时候我们需要在复制后做一些事情，这个时候就需要回调函数的支持。这个库也提供一些回调处理函数。

回调函数两个，复制成功后返回函数success，和失败时的返回error，返回的内容，这里，就不多解释了，直接看一下返回的数据结构。

clipboard使用起来是不是很简单，但是，就为了一个copy功能就使用额外的第三方库是不是不够优雅，这时候该怎么办？所以，下面我来写原生方法怎么实现。

二、 document.execCommand()

定义：

先来看一下，这个方法是怎么定义的：

大概的意思就是可以允许运行命令来操作可编辑区域的内容，注意，是编辑区域。

语法：

使用语法方式是这样的：

追一句，aCommandName表示命令名称，比如：copy，cut等。

看一下兼容性：

这个方法在之前的兼容性其实是不太好的，但是好在现在已经基本兼容所有主流浏览器了，在移动端也可以使用。到caniuse搞张图看一下，如下：

知道了定义，语法和兼容性，接下来我们我们看一下如何使用（我单独搞一个小段来说一下）：

三、document.execCommand()使用和一些问题

比如：现在页面上有一个<input>标签，我们想要复制其中的内容，就可以这么写：

有的时候页面上并没有input标签，我们可能需要从一个div中复制内容，或者直接复制变量。

还记得在execCommand()方法的定义中提到，它只能操作可编辑区域，也就是意味着除了input，textarea这样的输入域以外，是无法使用这个方法的。

那怎么搞？那就将它变成一个可编辑的区域就行了。看一下

完美实现。就这样完了吗，不行，在移动端还是有一些BUG的，下面来列一下。

四、移动端下的BUG

在IOS下有两个问题

1、点击复制时屏幕下方会出现白屏抖动

仔细看是拉起键盘又瞬间收起，既然是拉起键盘，那就是聚集到了输入域，我们只要让输入域不可输入就好了，在代码中添加

input.setAttribute('readonly','readonly')

使这个input是只读的，就不会拉起键盘了。

2、无法复制

这个问题是由于 input.select()在IOS下并没有选中全部内容，我们需要使用另一个方法来选中内容，这个方法就是：

input.setSelectRange(0,input.value.length)

完成的代码可以这么写：

最后总结一下：

每个方法学习都是这样的，知道它的使用规则不难，让它在应用场景中完美应用可能是需要我们动脑子的地方。本文如有误，欢迎留言。

近写http://www.itoolshub.com/的时候用到了日期时间选择器,Angular本身material2只有日期选择器,也不知道为什么官方不提供日期时间选择器,也可能是Angular2以及如今的4有些年轻,很多库都不是很成熟,于是乎搜索到的解决方案就是借助第三方的库来使用一些优秀的组件.本文以https://github.com/sentsin/laydate组件为例.

引入js与css

https://github.com/sentsin/laydate是采用原生js实现的组件,因此不需要考虑相关依赖,直接入手.

1.使用npm下载该组件npm install layui-laydate -save

2.在.angular-cli.json文件中配置

1234567

"styles": ["styles.scss","../node_modules/layui-laydate/dist/theme/default/laydate.css"],"scripts": ["../node_modules/layui-laydate/dist/laydate.js"],

Angular在编译的时候会把上述的js引用都打包到scripts.bundle.js文件中

ts编译识别laydate

第一步完成后如果在TS中使用laydate变量,编译器是会直接报错的,因为其找不到这个变量,因此这一步要做的就是让ts识别该变量.做法很简单,在typings.d.ts中加入声明

1234567

/* SystemJS module definition */declare var module: NodeModule;interface NodeModule {id: string;}// laydate声明declare var laydate: any;

使用laydate功能

laydate是需要更改Dom节点的,因此该步骤必须放到Angular对视图渲染之后,也就是生命周期中的AfterViewInit函数中执行.另外该渲染会使得双向绑定失效,需要处理结果则可以在laydate的回调函数中处理.

另外使用的时候就可以按照ts的语法来使用了,最终都会解析成原生js.比如下方的箭头函数.

12345678910111213

ngAfterViewInit(): void {let done = (value, date, endDate) =>{let selectTime = new Date(value);this.timeStampOut = selectTime.getTime() / 1000;this.timeStampWeek = TimestampComponent.WEEKS[selectTime.getDay()] == null ? "Invalid Week": TimestampComponent.WEEKS[selectTime.getDay()]};laydate.render({elem: '#layerdate',type: 'datetime',change: done,done: done});}

备注

很多库都是直接对DOM进行操作,这对于Angular这种虚拟Dom操作会导致绑定失效等各种异常问题,一般情况下不建议混编,尤其是大项目,到后期会出现各种折磨人的小问题.

日常工作总会遇到在<a>标签中执行js代码的情况 现在做一个总结，希望对大家有一个帮助。

1、a href="javascript：js_method();"

这是我们平台上常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且javascript：协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。

W3C标准不推荐在href里面执行javascript语句。

2、a href="javascript：void(0);" onclick="js_method()"

这种方法是很多网站最常用的方法，也是最周全的方法，onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。

3、a href="javascript：;" onclick="js_method()"

这种方法也是网上很常见的代码，#是标签内置的一个方法，代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。<a href="#"></a> 如果页面有滚动条 点击后网页后返回到页面的最顶端。

4、a href="#" onclick="js_method();return false;"

这种方法点击执行了js函数后return false，页面不发生跳转，执行后还是在页面的当前位置。