How to Prevent Text Selection Inside a DIV Element?

Preventing Text Selection within a DIV Element

In certain scenarios, it becomes crucial to ensure that specific text within a DIV element remains unselectable by the user. For instance, you may encounter situations where a large, translucent text overlaying a textarea serves as a watermark. While the aesthetics may be pleasing, unintended selection of this text can pose a hindrance.

Z-Index Ineffectiveness

Initially, one may assume that manipulating the z-index property would resolve this issue. By assigning a lower z-index value to the watermark text, it would theoretically be rendered below the higher-z-index textarea. However, browsers disregard z-index layers when determining text selectability.

CSS Solution

To achieve the desired behavior, CSS offers a straightforward solution:

.watermark {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

This comprehensive code caters to multiple browsers, effectively disabling text selection within the DIV element with the class "watermark."

jQuery Extension

Alternatively, if you prefer a jQuery-based approach, consider employing the following extension:

$('.watermark').disableSelection();

This extension explicitly prevents selection within the specified DIV elements.

Implementing either of these methods will ensure that the watermark text remains unselectable, enhancing the user experience and preventing unwanted text modifications.

The above is the detailed content of How to Prevent Text Selection Inside a DIV Element?. For more information, please follow other related articles on the PHP Chinese website!