/

如何使用CSS禁用文字選擇功能

如何使用CSS禁用文字選擇功能

了解如何使用CSS屬性user-select來禁用文字選擇功能。

預設情況下，瀏覽器允許我們使用鍵盤或滑鼠來選擇網頁中的文字。例如，在Mac上可以使用cmd-A組合鍵。

那麼如何禁用這個功能，使得我們的網頁更像是一個應用程式，而不是一個文件呢？

使用user-select: none; CSS屬性即可實現。

根據https://caniuse.com/#feat=user-select-none的資訊，需要使用瀏覽器前綴來實現兼容性：

1
2
3
4
5
6
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

有時，我會通過在body元素上應用user-select: none;來使整個應用程式介面都無法選擇文字，然後可以在特定元素上重新啟用文字選擇，使用以下代碼：

1
user-select: text;

tags: [“CSS”, “user-select”, “網頁設計”]