[譯]用CSS來禁止文本選擇

ShevaKuilin 發布于2019-08-28 18:20 / 1347人閱讀

摘要：原文有些時候我們需要禁止網頁的部分文本不能被選擇。這不是一種萬全的保證文本不被選擇的策略。這種技巧依賴于非標準的特性，這意味著未來對這個屬性的可持續支持上面存在著很大的不確定性。屏蔽掉文本選擇是很惱人的。

原文：Disable Text Selection with CSS

有些時候我們需要禁止網頁的部分文本不能被選擇。你可以使用user-select這個CSS特性來實現這個需求。

舉例

下面是一個使用了disable-selection類的樣式規則，當它作用于一個HTML元素的時候，它會讓我們不能夠選擇這個元素。

.disable-selection{
    -moz-user-select:none; /* Firefox */
     -ms-user-select:none; /* Internet Explorer */
   -ktml-user-select:none; /* KHTML瀏覽器（比如：Konqueror） */
 -webkit-user-select:none; /* Chrome,Safari,and Opera */
   -webkit-touch-callout:none; /* Disable Android and IOS callout */
}

關于這些樣式的一些細節的解釋：

-webkit-user-select是給Chrome,Safari和Opera用的（并不需要使用-o-user-select）。

沒有前綴的user-select是被故意略去的。

-webkit-touch-callout屬性可以讓在移動設備上的觸摸后彈出失效。就像下面的這些，我們可以讓它們不能出現。

演示

查看演示

要時常記住的

有一個陷阱就是：user-select并不是W3C規范中標準的CSS特性。盡管user-select通過添加瀏覽器前綴有很好的瀏覽器支持。

前面的例子中，我沒有使用沒有前綴的user-select特性聲明。那是因為在web標準中根本就沒有這個屬性。我們可以對它的使用類比于于IE專有的CSS屬性ms-filter或者-ms-text-kashida-space的屬性的使用。

其他需要注意的地方：

user-select是有問題并且是不穩定的。有些時候你依然還是可以選擇文本，特別是當你從沒有被屏蔽掉文本選擇的文本的那部分開始選擇。

使用全選快捷鍵有些時候還是會把屏蔽文本選擇(Win:Ctrl+A/Mac:Cmd+A)。這種情況你可以在IE11中清楚的了解到。

這不是一種萬全的保證文本不被選擇的策略。CSS能夠很容易被屏蔽。這種技巧依賴于非標準的CSS特性，這意味著未來對這個屬性的可持續支持上面存在著很大的不確定性。

屏蔽掉文本選擇是很惱人的。我會在漸進提升的過程中使用這個技巧：只有當它可以提高使用支持這個user-select特性的瀏覽器和設備的用戶的用戶體驗的時候才使用它。但是，我絕不會把它設置成一個大范圍的CSS選擇器像全部選擇器(*）或者body.

這個user-select特性可能會讓你的樣式表失效。如果遵循標準對你來說非常重要，使用這個屬性會在你使用規范測試比如說CSS Validation Service的使用出現問題

瀏覽器支持

更新于：2015年3月

瀏覽器	版本支持（以上）
Chrome	6
Firefox	2
IE	10
Safari	3.1

移動端

瀏覽器	版本支持（以上）
Chrome(Android)	2.1
Safari(IOS)	3.2

云服務器 GPU云服務器 css文本框用jquery來定位 css選擇文本選擇功能

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111181.html

css相關 - 收藏集 - 掘金

摘要：在正式前端一些小細節前端掘金英文原文，翻譯未來的太讓人興奮了一方面，是全新的頁面布局方式另一方面，是酷炫的濾鏡顏色等視覺效果。老司機教你更好的進行編程個技巧前端掘金并不總是容易處理。 CSS3 實現文字流光漸變動畫 - 前端 - 掘金來自百度前端技術學院的實踐任務：有趣的鼠標懸浮模糊效果，參考：http://ife.baidu.com/course/d...，用CSS3實現了一下，順便...

molyzzx 2019-08-29 12:38 評論0 收藏0
【譯】表單組件的屬性兼容性表

摘要：系列文章說明原文下面的兼容性表將總結出表單對的支持程度，由于和表單的復雜性，這幾個表不能認為是最佳的參考對象。該屬性不能生效，或者表現很不一致以至于不可靠。在表單組件上，不支持該屬性。按鈕屬性備注該屬性不會在上的瀏覽器上生效。系列文章說明原文下面的兼容性表將總結出HTML表單對CSS的支持程度，由于CSS和HTML表單的復雜性，這幾個表不能認為是最佳的參考對象。盡管如此，它們...

李文鵬 2019-08-29 11:07 評論0 收藏0
【譯】表單組件的屬性兼容性表

摘要：系列文章說明原文下面的兼容性表將總結出表單對的支持程度，由于和表單的復雜性，這幾個表不能認為是最佳的參考對象。該屬性不能生效，或者表現很不一致以至于不可靠。在表單組件上，不支持該屬性。按鈕屬性備注該屬性不會在上的瀏覽器上生效。系列文章說明原文下面的兼容性表將總結出HTML表單對CSS的支持程度，由于CSS和HTML表單的復雜性，這幾個表不能認為是最佳的參考對象。盡管如此，它們...

XanaHopper 2019-08-01 15:35 評論0 收藏0
CSS開發

摘要：譯十六進制顏色揭秘原文地址原文作者譯文出自掘金翻譯計劃本文永久鏈接教程入門篇關于是一款進行柵格布局的輔助工具，它讓開發者擺脫了冗雜的數學計算，同時降低了樣式與結構的耦合程度。【譯】CSS 十六進制顏色揭秘原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 譯文出自：掘金翻譯計劃本文永久鏈接：https://github.com/xitu/...

warkiz 2019-08-30 13:54 評論0 收藏0
【譯】HTML表單樣式

摘要：并非所有組件受的影響都是平等的如今在表單使用時依然有一些困難這些問題可歸為三類還好的若存在跨平臺問題，一些元素可以只添加少許的樣式，有如下幾個結構元素此外，還有所有的文本框組件單行或多行，以及按鈕。系列文章說明原文本文中，我們將學習如何使用CSS來讓HTML表單看起來更漂亮，這可能需要竅門才能做到。由于歷史及技術上的原因，表單組件并不太適合使用CSS；而也正因為有這些困難，許...

DC_er 2019-08-30 13:06 評論0 收藏0