HTML5實戰與剖析之剪貼簿事件

　　很多網站當複製貼上的時候，都會出現有關剪貼簿的相關提示，在剛剛入行前端工程師的時候，我還在一直納悶，這是怎麼實現的呢。如今，咱們再也不用納悶了，因為已經有瀏覽器把剪貼簿相關事件納入標準了。

　　IE是最早支援與剪貼簿相關的事件，以及透過JavaScript存取剪貼簿資料的瀏覽器。 IE的實現成為了事實上的標準，隨後Firefox 3+ 、 Chrome和Safari 2+都支援類似的事件和剪貼簿的訪問，但是Opera不支援透過JavaScript訪問剪貼簿。直到HTML5的到來，將剪貼簿相關事件納入了HTML5規範。下面就是6個剪貼簿事件。

　　beforecopy：在發生複製操作前觸發;

　　copy：在發生複製操作的時候觸發;

　㟜〜〜〜㟜〜） ：在發生剪切操作的時候觸發;

　　

beforepaste：在發生貼上操作前觸發;

　　

paste：在發生貼上操作的時候觸發。

　　因為沒有針對剪貼簿操作的標準，這些事件及相關物件會因為瀏覽器而不一樣。在Firefox、Chrome和Safari中，beforecopy、beforecut和beforepaste事件只會在顯示針對文字方塊的上下文選單(預期將發生剪貼簿事件)的情況下觸發。但是IE則會在觸發copy、cut和paste事件之前先觸發這些事件。至於copy、cut和paste事件，只要是在上下文選單(右鍵選單)中選擇了對應選項，或是使用了對應的鍵盤組合鍵如(ctrl+v)，所有瀏覽器都會觸發他們。

　　在實際的事件發生之前，透過beforecopy、beforecut和beforepaste事件可以在向剪貼簿發送數據，或者從剪貼板取得數據之前修改數據。不過，取消這些事件並不會取消對剪貼簿的操作，只有取消copy、cut和paste事件，才能阻止對應的操作發生。

　　要存取剪貼簿中的數據，可以透過clipboardData物件：在IE中，clipboardData物件是window物件的屬性;而在Chrome、Safari和Firefox 4+中，clipboardData物件是對應event對的屬性。但是，在Chrome、Safari和Firefox 4+中，只有在處理剪貼簿事件期間，clipboardData物件才有效，這是為了防止對剪貼簿的未授權存取;在IE中，則可以隨時存取clipboardData物件。為了確保跨瀏覽器相容，最好只在發生剪貼簿事件期間使用這個物件。

　　這個clipboardData物件有三個方法：getData()方法、setData()方法和clearData()方法。其中，getData()方法用於從剪貼簿中獲取數據，它接收一個參數，即要取得的數據格式。在IE中，有兩種​​資料格式：'text”和”URL」。在Chrome、Safari和Firefox 4+中，這個參數是一種MIME類型;不過，可以用”text”代表”text/plain”。

　　setData()方法的第一個參數也是資料類型，第二個參數是要放在剪貼簿中的文字。 、Safari中，仍然支援MIME類型。之後，都會回傳true;否則回傳false。只要確定clipboardData物件的位置，然後再以」text」型別呼叫getData()方法即可。 )方法傳入不同的類型(對於Chrome和Safari是”text/plain”;IE是”text”)。時，能夠存取剪貼簿是非常有用的。無效就可以像下面範例中取消預設的行為。

　　在這裡，onpaste事件處理程序可以確保只有數值才會被貼上到文字方塊中。

　　因為不是所有瀏覽器都支援存取剪貼簿，所以更簡單的方法是屏蔽一或多個剪貼簿操作。在支援copy、cut和paste事件的瀏覽器中(Firefox 3+、Safari、Chrome和IE)，很容易阻止這些事件的預設行為。在Opera中，則需要阻止那些會觸發這些事件的按鍵操作，同事也要阻止在文字方塊中顯示上下文選單(右鍵選單)。

　　雖然和剪貼簿相關的事件已經納入了HTML5規範當中，但是Opera始終還不支援剪貼簿相關事件，所以實際應用起來還是比較頭痛的。 HTML5實戰與剖析之剪貼簿事件就為大家介紹到這裡了，更多有關HTML5的相關知識請關注夢龍小站的相關更新。

以上就是HTML5實戰與剖析之剪貼簿事件的內容，更多相關內容請關注PHP中文網（www.php.cn）！