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

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

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

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

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

-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;來使整個應用程式介面都無法選擇文字,然後可以在特定元素上重新啟用文字選擇,使用以下代碼:

user-select: text;