移動端 ios 長按複製相容方案

2022-01-10 16:37:05 字數 1526 閱讀 9742

移動端頁面,需要複製一段文字碼。

在ios中,長按文字區域,預設選中的範圍,超出了我長按的文字區域,

把上面的和下面的另乙個div的文字也給我包含進來了,並不是我想要的!

舉個例子:

如下圖:

1.我長按的區域是紅色方框內的區域,想要複製框裡的文字內容。

2.結果卻是下圖,即便 ios 上能再稍微操作一下、變成我想要的複製區域,但是這樣使用者體驗太差

3.得想辦法長按後 立刻變成如下圖的情況

那麼,想到了平時在其他站點上用到的一鍵複製,比如的複製部落格裡的**:

查了下有關頁面複製功能,發現有個zeroclipboard基於flash+js實現的。

拿到手機上測了一下,大部分手機預設是沒flash的,根本就不好用,而且我也不想用flash有關的東西。pass!

後來又查到了什麼: document.body.createtextrange(),window.getselection,然後一堆相容**,》部落格在這《。

我真是沒耐心看這個,為了這麼小的乙個功能,寫這麼多**。然後各種查閱,也沒想到什麼好辦法。

後來我又在想為什麼長按後會把同級的其他div裡的內容選中呢?如果我把其他div的z-index設定為不同高度,會不會就好了呢?

當然我這個頁面都是用的絕對定位,本來就是脫離了文件流的,有點異想天開了。

我把其他同級的div設定為不能選中,那範圍應該就不會擴大了吧!

然後搜尋發現了乙個css3屬性: user-select

》三方詳解位址《

然後測試,通過!太簡單了,新增兩個css類就搞定了!

好吧!還是很高興的,雖然也不是多牛逼一樣。

「偷懶」有時候真是一種動力,要善於用簡單的方法去解決問題,看到麻煩的方案,就應該想更簡單的方法。

一條思路走不通,不要過於執著,換個思路也許就更好。

確實感覺解決了乙個很簡單的問題,不怎麼牛逼,都不好意思寫部落格一樣。

但是我還是肯定有朋友遇到這種問題,分享出來吧,與大家共勉。

ps:發現在某些節點情況下,會選中整個父元素。

有點無語,暫時沒想到新解決辦法。

ps:此屬性還有個體驗特別好的地方,一些平台或者瀏覽器上,長按父元素也會直接選中可以選中的區域

移動端長按事件

lang en charset utf 8 name viewport content width device width,initial scale 1.0 documenttitle head src js jquery.min.js script li style body id style...

手機端長按文字複製

css webkit user select none 可以限制長按複製 相容性 設定或檢索是否允許使用者選中文字。ie6 9不支援該屬性,但支援使用標籤屬性 onselectstart return false 來達到 user select none 的效果 safari和chrome也支援該標...

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

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