JavaScript : iOS 將內容複製到剪貼簿

 最近幾支 HTML5 程式有將內容複製到剪貼簿的需求，在電腦上，在 Android 系統上都沒有問題，就是 iOS 上一直搞不定。花了一點時間研究到底問題出在哪裡。

首先，如果有將文字複製到剪貼簿的需求，可以參考 w3school.com 底下這篇中的範例：

•  How TO - Copy Text to Clipboard (w3school.com)

上面這篇範例的程式碼是利用「navigator.clipboard.writeText」把 input 的值，複製到剪貼簿中，這個方法用在 textarea 一樣也行的通，至於用在可編輯的 div 中，照網路上大家的討論，還需要做一點設定，這部份我倒還沒試。

程式必須放到「安全的」主機

好的！前面說上面那篇範例可行；不過，當我將範例套到我自己的程式中，狀況來了。

如果直接在 iPad 上開啟 w3school.com 的範例，確實可以複製文字到剪貼簿。但是同樣的程式碼，放到我自己的 web server ( http://192.168.2.101/ ) 上，用 iPad 來開啟，剪貼簿中，空空如也！

我用 try ... catch ，再用 alert 把錯誤訊息顯示出來：

navigator.clipboard.writeText 不存在

好了！有錯訊息就比較有方向，用「TypeError: undefined navigator.clipboard.writeText」當關鍵字， 找到了這篇：

• navigator.clipboard is undefined ( https://stackoverflow.com/ )

問題應該是出在我的 web server 是 http://192.168.2.101/，在 iOS 的眼裡，它就是非安全的網域，所以 navigator.clipboard 不能使用，該物件直接被做掉，變成「undefined」了。

沒關係，navigator.clipboard.writeText 不給用，還有另一個備案：

document.execCommand('copy');

換成 document.execCommand('copy') ，我放在自己實驗主機中的程式，在 iOS 中就可以順利執行複製到剪貼簿的功能了。

捨 touchstart 用 touchend

本以為用 document.execCommand('copy') 當備案就可以解決「安全」的問題，後來想想，我放到 GitHub 上的程式，在 iOS 中，不也沒作用，可見還有其它問題。

上回在研究 contenteditable="true" 的 div 時，遇過無法順利觸發 focus 的問題，體驗到 click 、 touchstart 和 touchend 的差異性。所以不禁懷疑是自己選錯了監聽的事件。

於是將 w3school.com 的那個範例再加了兩個按鈕，總共三個按鈕，測試 click、touchstart 和 touchend 在被觸發後，都去呼叫相同的程序。

三個按鈕監聽不同的事件

click 不用講，前面已經測試過是可行的。touchstart 跟 touchend 兩個事件，果然只有 touchend 有作用。

下面加五個按鈕，可以測試一下。

在 iOS 的載具上按底下五個按鈕，看看是否能將輸入區旳內容複製到剪貼簿中