在現(xiàn)在開發(fā)的項(xiàng)目中霎俩,有一些設(shè)計(jì)到技術(shù)問題的灵份,不想被用戶選中復(fù)制仁堪,原先需要監(jiān)聽右鍵等進(jìn)行判斷,現(xiàn)在發(fā)現(xiàn)css3中有user-select特性填渠,一行代碼就能解決問題弦聂。
user-select屬性是css3新增的一個(gè)屬性,它可以用來控制內(nèi)容的可選擇性氛什,設(shè)置或檢索是否允許用戶選中文本莺葫,適用于除替換元素外的所有元素。
可以設(shè)置以下的屬性值:
auto:默認(rèn)值枪眉,文本將根據(jù)瀏覽器的默認(rèn)屬性進(jìn)行選擇捺檬;
none:可以設(shè)置用戶不能選擇元素中的任何內(nèi)容 ;
text:設(shè)置用戶可以選擇元素中的文本 贸铜;
element:設(shè)置文本可選堡纬,但選擇范圍受元素邊界的約束(該屬性值只被IE和FF支持)
all:當(dāng)所有內(nèi)容作為一個(gè)整體時(shí)可以被選擇。如果雙擊或者在上下文上點(diǎn)擊發(fā)生在子元素上蒿秦,則該子元素向上回溯的最高祖先元素將被選中烤镐。簡(jiǎn)單來說就是:目標(biāo)元素將被整體選中,不能只選中一部分棍鳖,瀏覽器會(huì)自動(dòng)選中整個(gè)元素里的內(nèi)容炮叶。
-moz-none:firefox私有的屬性值,設(shè)置元素和子元素的文本將不可選;但是镜悉,子元素可以通過text重新設(shè)置為可選祟辟。
說明:
因?yàn)镮E6-9不支持user-select屬性,想要實(shí)現(xiàn)user-select:none积瞒,即:禁止文本被選中川尖,禁止復(fù)制的效果,可以使用標(biāo)簽屬性 onselectstart="return false;" 來實(shí)現(xiàn)茫孔;同時(shí)Safari和Chrome也支持該標(biāo)簽屬性叮喳。