How to Prevent Text Selection within an Overlapping, Transparent DIV?

Controlling Element Selectivity: Making a DIV Unselectable

Issue Description

When a transparent DIV overlays text within a textarea as a watermark, the watermark may inadvertently become selectable when the user clicks on the textarea. The goal is to prevent the watermark text from being selectable, despite its lower position in the z-index.

Resolution

jQuery Extension:

Embed the jQuery disableSelection extension into your code:

$('.button').disableSelection();

CSS Alternative (Cross-Browser):

Apply the following CSS properties to the target DIV:

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

These properties disable user selection for the specified DIV element across various browsers.

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