DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS特效代碼 >> 使用CSS在移動端禁用長按選中文本功能
使用CSS在移動端禁用長按選中文本功能
編輯:CSS特效代碼     
在手機浏覽器中,長按可選中文本,但如果在應用中,會給人一種異樣的感覺,最好還是禁用此功能為上。

* {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
但是目前只支持webkit內核的浏覽器。

你可以長按本頁試試,或者試著選擇本頁的文本看看。請使用Chrome,火狐或者IE11浏覽器。

獲取代碼:http://hovertree.com/texiao/css3/36/



下面我們來看看關於user-select的一些介紹。

user-select的介紹

user-select是在css3 UI規范中新增的一個功能,用來控制內容的可選擇性。

語法

user-select:value;

可選參數

auto——默認值,用戶可以選中元素中的內容
none——用戶不能選擇元素中的任何內容
text——用戶可以選擇元素中的文本
element——文本可選,但僅限元素的邊界內(只有IE和FF支持)
all——在編輯器內,如果雙擊/上下文點擊發生在子元素上,改值的最高級祖先元素將被選中。
-moz-none——firefox私有,元素和子元素的文本將不可選,但是,子元素可以通過text重設回可選。

使用示例

.selectDemo{
background-color:#eee;
padding:20px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
浏覽器支持

目前,只有Gecko和webkit支持該屬性,包括基本上所有版本的Firefox/Chrome/Safari,IE10中也將支持該屬性。當然,各個浏覽器都必須加上私有前綴。Opera尚不支持。

總結

這個屬性,在之前是被用來保護網站的內容,不被用戶復制和轉載,從而保護資訊的版權,但是這樣卻對普通用戶的用戶體驗造成了傷害,而且,並不能真正的保護頁面中的內容,這對前端開發人員來說,直接查看源代碼就可以復制網頁中的問題。

現在,HTML5蒸蒸日上,很多網站或者web app會使用到Drag and Drop技術,user-select正好在一些情境中可以用到。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved