在手機浏覽器中,長按可選中文本,但如果在應用中,會給人一種異樣的感覺,最好還是禁用此功能為上。
* {
-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正好在一些情境中可以用到。