首先遇到這個需求是就各種百度,但發現基本上都是用js實現,而且相容性還非常不好。
但在尋覓和嘗試的過程中,發現只需要css程式碼也可以完全實現的,對需要複製內容的標籤加上下面這幾行程式碼就可以了。
-webkit-touch-callout: all;-webkit-user-select: all;-moz-user-select: all;-ms-user-select: all;user-select: all;
其實意思是不限制使用者對內容的操作,不停用系統預設選單,長按會顯示系統自帶的複製功能進行複製。
使用clipboard.js實現行動端貼上複製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武林網站的支持!