Home >Web Front-end >CSS Tutorial >How to Prevent HTML Text from Being Selectable?
How to Prevent HTML Text from Being Selectable
If you wish to embed text in your webpage as a label and disable its selectability, prevent the mouse cursor from transforming into a text selection cursor when hovering over the text.
CSS3 Solution:
If targeting modern browsers, utilize CSS3:
.unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
<label class="unselectable">Unselectable label</label>
JavaScript Fallback:
For older browsers, a JavaScript fallback method can be employed:
<!doctype html> <html lang="en"> <head> <title>SO question 2310734</title> <script> window.onload = function() { var labels = document.getElementsByTagName('label'); for (var i = 0; i < labels.length; i++) { disableSelection(labels[i]); } }; function disableSelection(element) { if (typeof element.onselectstart != 'undefined') { element.onselectstart = function() { return false; }; } else if (typeof element.style.MozUserSelect != 'undefined') { element.style.MozUserSelect = 'none'; } else { element.onmousedown = function() { return false; }; } } </script> </head> <body> <label>Try to select this</label> </body> </html>
jQuery Solution:
If jQuery is employed, extend its functionality with the following code:
<!doctype html> <html lang="en"> <head> <title>SO question 2310734 with jQuery</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $.fn.extend({ disableSelection: function() { this.each(function() { if (typeof this.onselectstart != 'undefined') { this.onselectstart = function() { return false; }; } else if (typeof this.style.MozUserSelect != 'undefined') { this.style.MozUserSelect = 'none'; } else { this.onmousedown = function() { return false; }; } }); } }); $(document).ready(function() { $('label').disableSelection(); }); </script> </head> <body> <label>Try to select this</label> </body> </html>
The above is the detailed content of How to Prevent HTML Text from Being Selectable?. For more information, please follow other related articles on the PHP Chinese website!