HTML5實現移動端複製功能

2022-09-26 19:12:21 字數 677 閱讀 2775

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

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

-webkit-touch-callout: all;

-webk程式設計客棧it-user-select: all;

-moz-user-select: 程式設計客棧all;

-ms-user-select: all;

user-select: all;

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

使用clipboard.js實現移動端貼上複製

clipboard.js是一款很強大的貼上複製的外掛程式,但是在移動端使用,會出現相容性問題。下面是我常使用的一種解決方案。

html

js$(function () );

clipboard.on('error', function(e) );

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

總結本文標題: html5實現移動端複製功能

本文位址:

HTML5 拖拽複製功能的實現

拖拽是一種常見的特性,即抓取物件以後拖到另乙個位置。在 html5 中,拖拽是標準的一部分,任何元素都能夠拖拽。html5拖拽非常常見的乙個功能,但是大部分拖拽的案例都是乙個剪下的過程,專案中需要實現html5拖拽複製的功能,html5拖拽複製很簡單,只需要在普通html5拖拽的過程中做一點小小的改...

移動端HTML5實現檔案上傳

pc端上傳檔案多半用外掛程式,引入flash都沒關係,但是移動端要是還用各種冗餘的外掛程式估計得被噴死,專案裡面需要做上傳的功能,既然h5已經有相關的介面且相容性良好,當然優先考慮用h5來實現。用的技術主要是 ajax filereader formdata html結構 div class cam...

HTML5移動端優化

手機端筆記 float在渲染時計算量比較大,儘量減少使用 過多的font size引發css樹的效率 a 避免不必要的dom操作 b 盡量改變class而不是style,使用classlist代替classname c 避免使用document.write d 減少drawimage meta na...