移動端頁面,需要復制一段文字碼。
在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:
此屬性還有個體驗特別好的地方,一些平台或者瀏覽器上,長按父元素也會直接選中可以選中的區域