js外掛程式zClip實現複製到剪貼簿功能

2022-04-23 04:51:22 字數 1305 閱讀 1273

之前在乙個專案中用過外掛程式,但是最近又要做,發現,出現問題了,根據以往記憶做好,檢查了所有問題,還是不出現,元素是繫結了zclip_type這個事件,就是彈出不顯示,想了下,檢視html結構元素一看,問題發現,覆蓋的層定位有問題。相對body定位了,沒有相對td定位。

一,準備工作。

在html裡加上

2. 編寫**

下面是乙個小demo,主要是複製文字框中的鏈結到剪貼簿。

複製鏈結
然後加入指令碼,非常的簡單。

這裡的path是你flash的路徑,copy是複製成功之後的**函式。返回的是文字框裡的value值。

複製**

var settings = $.extend(, params);

複製**

同樣修改path為你的flash--zeroclipboard.swf的路徑,其他的設定我們先不管他。

好了,立馬來測試吧,不過這裡要注意的是,本地測試是不成功的,你要用tomcat或apache在本機搭乙個伺服器,然後把檔案放到伺服器目錄下測試。你會看到移到複製鏈結上的時候出現了小手,又見是flash的選單,如圖所示:

然後點選它,出現成功提示框。你可以試著在其他地方貼上,看看有沒有複製成功。

當然你也可以修改複製成功之後的提示框,或者新增更多功能。

在中找到如下**。

clip.addeventlistener('

complete

', function(client, text)

else

o.removeclass(

'hover');

alert(

"copied text to clipboard:\n\n

" +text);

}if(settings.clickafter)

});

修改alert那個地方的**就可以了,也許還有其他地方也可以修改,我沒有細看。

3. 其他

我們用chrome開啟我們的demo,開啟控制台可以看到

沒錯,這正是外掛程式給我們的頁面插入了flash,可以看到它正好蓋住了我們的」複製鏈結「按鈕。

ClipboardJS 實現JS複製到剪下板

下面寫個簡單的例子 html 注意,這裡最好是button,並非所有的元素都支援該js button type button class btn btn default id btn share 複製 button js 這裡以複製url為例 var clipboard new clipboardj...

純js實現複製到剪貼簿

自己在維護的乙個站點很坑爹,複製到剪下板功能只能在老版本的火狐上使用。這裡我簡單記錄下自己改造的過程。使用的元件 github 使用的元件 引入js檔案 src dist clipboard.min.js script 前端css樣式 class js copy 複製到剪下板button 編寫js ...

JavaScript實現複製到剪貼簿

直接通過外掛程式形式即可,使用clipboard,該外掛程式不到 4kb。1.html value www.com type text readonlyid shareurl cpoyshareurlbtn data clipboard target shareurl 複製鏈結button 2.引入...