如何讓HTML5實現行動端複製功能

這篇文章主要介紹了HTML5實作行動端複製功能,文中也為大家介紹了使用clipboard.js實作行動裝置貼上複製功能的實作程式碼，需要的朋友參考下吧

首先遇到這個需求是就各種百度，但發現基本上都是用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">
<p class="the_btn_con"><button class="btn" data-clipboard-target="#foo1">复制</button></p>

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控件，而不是p或span。因為，測試時只有input的相容性最好，不會有問題，能夠保證正常複製。同時，該外掛也不支援safari 版本號<10,所以要做好提示。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

如何實作HTML5頁面音影片在微信與app下自動播放

H5手機端圖片上傳外掛程式碼

以上是如何讓HTML5實現行動端複製功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！