擊上方藍字關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！

用戶點擊或者長按就可以將內容復制到剪貼板，這個功能很常見，實現起來卻有一些講究。下面我來簡單總結一下它的實現方法和存在的一些問題是如何解決的。

實現這個功能基本上就是兩種方法：

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，頁面不發生跳轉，執行后還是在頁面的當前位置。