HTML5手機頁面里面如何把長按復制避免


在寫HTML5手機頁面的時候,有時候會寫到一些標簽是需要用戶長按然后放開的

但是微信里面長按就會出現復制,大大影響了用戶體驗,那么如何可以避免呢?

我也是最近寫到這樣的頁面,總結了一部分,大家可以作為參考

1.有一個按鈕,用戶需要長按它說話,但是顯示在微信里面的網頁,長按會出現復制的菜單,造成用戶體驗不流暢。像下圖這樣

2.這個按鈕我是用a標簽寫的,在a標簽里面加一句代碼

ontouchstart = "return false;"

這個方法,安卓和蘋果系統都可以用,個人比較喜歡這個,其中return false;可以替換為js函數,直接進行調用

3.上面的方法阻止的是一個按鈕區域的長按復制,但是其他地方還有有的,像下圖這樣

4.那么怎樣可以阻止當前頁面的微信長按復制

在css樣式表里面加入如下代碼

*{

-webkit-touch-callout:none;

-webkit-user-select:none;

-khtml-user-select:none;

-moz-user-select:none;

-ms-user-select:none;

user-select:none;

-o-user-select:none;

}

但是這個方法,對安卓系統不適用,蘋果系統適用,我都試過

5.如果實在沒辦法,可以讓用戶在瀏覽器中打開,就沒有這樣長按復制的,可以寫個頁面告訴用戶,點擊右上角——瀏覽器中打開

6.在普通瀏覽器中是沒有這樣的問題的,不過我還是喜歡第一種方法


免責聲明!

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



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