How to cancel text selection in html

In HTML, you can use the user-select attribute to deselect text. You only need to set the "user-select:none" code to the element. The user-select attribute is used to set whether the user can select text. When the value is none, it means that the text cannot be selected.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

The user-select attribute is a new attribute in CSS3, which is used to set whether the user can select text. Can be used for all elements except replacement elements. The following is a description of the main usage and precautions of user-select. For more information, please refer to the following css3 document description.

(1) Syntax

**user-select:**none | text | all | element

**Default value: **text

Applicable scope: all elements except replacement elements

(2) Value description

none: Text cannot be selected

text: Text can be selected

all: Can be selected when all content as a whole is selected. If you double-click or contextually click on a child element, the selected part will be the highest ancestor element tracing back from that child element.

Element: Text can be selected, but the selection range is constrained by the element boundary

(3) Description

1.IE6-9 does not support this attribute, but supports the use of labels Attribute onselectstart="return false;" to achieve the effect of user-select:none; Safari and Chrome also support this label attribute;

2. This attribute is still not supported until Opera12.5, but it is compatible with IE6-9 Similarly, it also supports using the private label attribute unselectable="on" to achieve the effect of user-select:none; the other value of unselectable is off;

3. In addition to Chrome and *Safari, in other browsers In the browser, if text is set to -ms-user-select:none;, the user will not be able to start selecting text within that text block. However, if the user starts selecting text in another area of ​​the page, the user can still continue to select the area text by setting the text to -ms-user-select:none; *;

4. The corresponding script properties are userSelect

(4) Example

css code:

.box{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html code:

<div class="box" onselectstart="return false;" unselectable="on">
    这是测试数据
</div>

Effect:

Recommended learning: html video tutorial

The above is the detailed content of How to cancel text selection in html. For more information, please follow other related articles on the PHP Chinese website!