移動端 ios 長按復制兼容方案


移動端頁面,需要復制一段文字碼。

在ios中,長按文字區域,默認選中的范圍,超出了我長按的文字區域,

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

舉個例子:

   如下圖:

  1.我長按的區域是紅色方框內的區域,想要復制框里的文字內容。

              

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

              

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

             

 

那么,想到了平時在其他站點上用到的一鍵復制,比如博客園的復制博客里的代碼:

 

 查了下有關頁面復制功能,發現有個ZeroClipboard基於flash+js實現的。
拿到手機上測了一下,大部分手機默認是沒flash的,根本就不好用,而且我也不想用flash有關的東西。pass!
 
后來又查到了什么: document.body.createTextRange(),window.getSelection,然后一堆兼容代碼, 》博客在這《
我真是沒耐心看這個,為了這么小的一個功能,寫這么多代碼。然后各種查閱,也沒想到什么好辦法。
 
后來我又在想為什么長按后會把同級的其他div里的內容選中呢?如果我把其他div的z-index設置為不同高度,會不會就好了呢?
當然我這個頁面都是用的絕對定位,本來就是脫離了文檔流的,有點異想天開了。
不過就是這個異想天開,把我的思緒抓到了dom上,靈光一現,我想到了一個關鍵詞:
 
 
我把其他同級的div設置為不能選中,那范圍應該就不會擴大了吧!
然后搜索發現了一個css3屬性: user-select
 
                》三方詳解地址《
 
 
 
然后測試,通過!太簡單了,添加兩個css類就搞定了!
 
 
 
好吧!還是很高興的,雖然也不是多牛逼一樣。
 
“偷懶”有時候真是一種動力,要善於用簡單的方法去解決問題,看到麻煩的方案,就應該想更簡單的方法。
一條思路走不通,不要過於執着,換個思路也許就更好。
 
確實感覺解決了一個很簡單的問題,不怎么牛逼,都不好意思寫博客一樣。
但是我還是肯定有朋友遇到這種問題,分享出來吧,與大家共勉。
 
PS:
發現在某些節點情況下,會選中整個父元素。
現在我有兩個頁面,iphone6微信下測試都成功,
iPhone5,微信里其中有一個頁面會選中父元素,另一個頁面正常。
有點無語,暫時沒想到新解決辦法。
 
PS:
此屬性還有個體驗特別好的地方,一些平台或者瀏覽器上,長按父元素也會直接選中可以選中的區域


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM