Disable text selection

Sometimes we need to simply mask the text content of a web page. You can use the user-select CSS feature to do this. Note that CSS Settings can be disabled by the browser to disable the function o(╥﹏╥)o–

body{ -webkit-touch-callout: none; /* Android and IOS can disable touch pop-ups on mobile devices. */ -webkit-user-select: none; /* Chrome,Safari, and Opera */ -khtml-user-select: none; /* KHTML browser (e.g. Konqueror) */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer */ user-select: none; /* Since the prefixed versions already include major browsers, the unprefixed user-select can be omitted */}Copy the code

It is important to note that user-select is not a standard CSS feature in the W3C specification. Although user-select has good browser support by adding a browser prefix

Other things to watch out for:

  • User-select is problematic and unstable. Sometimes you can still select text, especially if you start from the part of the text where the text selection is not masked.

  • When using the full selection shortcut keys, you will sometimes select the blocked text (Win:Ctrl+A/Mac:Cmd+A). You can see this clearly in IE11. This is not a foolproof strategy to ensure that text is not selected. CSS can be easily masked. This technique relies on non-standard CSS features, which means there is a lot of uncertainty about how sustainable this property will be in the future.

  • Blocking text selection is annoying. I use this technique in a progressive process: only when it improves the user experience of users using browsers and devices that support this User-select feature. However, I would never set it to a wide range of CSS selectors like all selectors (*) or body.

  • This user-select feature can invalidate your stylesheets. If conforming to standards is important to you, using this property will cause problems when you use standard tests such as CSS Validation Service

From: segmentfault.com/a/119000000…