Javascript / jQuery execCommand 複製文字至剪貼簿 | Javascript / jQuery execCommand Copy Text to Clipboard

copytext

要製作一鍵複製文字複製文字至剪貼簿的功能只要利用javascript原生的函式execCommand()就可以了,但是原生的函式只能複製文字欄位<input type="text">或文字區域<textarea>裡的資料,如果想要複製<div>或是<p>裡面的資料的話,需要把格式做一些調換,以下分成2個部份來示範。

一、複製文字欄位<input type="text">或文字區域<textarea>裡的資料

html

寫在input value=""裡的字文是要用來被複製的

input的id名稱是要給下面js調用的

button用onclick來觸發指令copyFunction()

 

js

得到的結果:

copytext

一起附上範例使用的css碼

 

二、複製<div>或<p>裡面的資料

html

文字(p)p的"id"要取得跟按鈕(copybBtn)的"name"一樣,下面的js會自動去找跟按鈕的name的一樣的id來複製

 

js

得到的結果:

%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2018-01-18-16-52-09

一起附上範例使用的css碼

 

以下附上從官網貼過來的資料execCommand()的瀏覽器支援清單:

%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2018-01-18-16-07-48 %e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2018-01-18-16-08-04

Leave a Reply