Perhaps a controversial idea but you can disable the ability for the user to select text in the browser by using the CSS user-select property. However it can be useful to disable this feature especially if you want your web page to act similarly to an app rather than a document.
To do this you must use the
user-select: none; CSS rule.
Looking at caniuse.com at time of writing this article you will need to use browser prefixes to support all major browsers: 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;
If you wanted to apply this to the whole document then you can apply the styling to the body element and then if you want to re-enable it for certain elements you can then use the:
Not very efficient code wise but it is a solution!
More CSS Guides
Michael Gearon is a Senior Interaction Designer at Companies House in Cardiff. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.