HTML5實作行動端複製功能

首先遇到這個需求是就各種百度，但發現基本上都是用js實現，而且相容性還非常不好。

但在尋覓和嘗試的過程中，發現只需要css程式碼也可以完全實現的，對需要複製內容的標籤加上下面這幾行程式碼就可以了。

 -webkit-touch-callout: all;-webkit-user-select: all;-moz-user-select: all;-ms-user-select: all;user-select: all;

其實意思是不限制使用者對內容的操作，不停用系統預設選單，長按會顯示系統自帶的複製功能進行複製。

clipboard.js是一款很強大的貼上複製的插件，但是在行動端使用，會出現相容性問題。下面是我常用的解決方案。

html

 <input id=foo1 value=http://www.shellad.com/_2SP__22（要複製的內容） readonly=readonly><div class=the_btn_con><button class=btn data-clipboard-target=#foo1>複製< /button></div>

js

 $(function () { var clipboard = new Clipboard('.btn'); //優雅降級:safari 版本號>=10,提示複製成功;否則提示需在文字選取後，手動選擇拷貝進行複製clipboard.on ('success', function(e) { alert('複製成功!') console.log($(this)) e.clearSelection(); }); clipboard.on('error', function(e) { alert('請選擇拷貝進行複製!') }); })

注意我在儲存要複製的內容時使用的是input控件，而不是div或span。因為，測試時只有input的相容性最好，不會有問題，能夠保證正常複製。同時，該外掛也不支援safari 版本號<10,所以要做好提示。

以上所述是小編給大家介紹的HTML5實作行動端複製功能，希望對大家有幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對VeVb武林網站的支持！