h5 複製功能實現 相容IOS和android

2021-09-17 22:21:49 字數 672 閱讀 6717

安卓實現方法:

document.getelementbyid('#input').select();   //選擇所要複製的文字節點

document.exexcommand('copy');   //執行瀏覽器的copy命令實現複製   

ios實現方法:

1、window.getselection().removeallranges();   //將頁面所有的文字區域都從選區中移除

2、var range =  docuement.createrange();   //建立乙個文字區域

3、var test = document.getelementbyid('#input');  //獲取所需要複製的節點

4、range.selectnode(test);   //將我們的所選節點新增到文字區域中

5、window.getselection().addrange(range);  //將文字區域新增至選區中

6、document.execcommand('copy');   //執行瀏覽器的複製命令

7、window.getselection().removeallranges();  //最後再移除選區中的所有文字區域

這兩個方法中都用到了document.execcommand(),這個是用來執行瀏覽器選單的很多功能,例如全選等等,這裡不再贅述,

H5相容處理

有一些不支援html5新標籤的瀏覽器中,會將一些新標籤解析成行內元素對待,所以需要將其轉化成塊元素即可使用。但在ie9版本一下,並不能正常解析這樣的標籤,但卻可以識別通過document.createelement tagname 建立的自定義標籤。所以需要載入第三方的乙個js庫來解決相容問題,這個...

H5移動端底部固定ios相容

問題 一 之前寫的底部導航欄固定用的是絕對定位 fixed 做的,在安卓是沒問題的,但在ios無法固定住 原因 安卓是相對瀏覽器做的定位,ios是相對滾動條做的定位,這個原因不是很確定啦,表述可能會有問題,看到的小夥伴可以略過啦 解決方法 頁面中不使用絕對定位 fixed 改為頁面100 布局。he...

移動端h5文字長按複製 H5實現移動端複製文字功能

前言 移動端專案開發中,經常遇到需要複製文字的場景,今天咱們就來聊一下,移動端複製文字的那些事 效果預覽 背景分析 業務需求很簡單,將指定的文字 例如 關鍵字 文案描述等 複製到手機的剪貼簿上,方便使用者直接進行貼上 解決方案 相關api document.execcommand setselect...