Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "how to prohibit text selection in html". In the operation of actual cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

In html, you can use the user-select attribute to disable text selection by adding a "user-select:none;" style to the text element; the user-select attribute is used to set whether the user can select text, and when the value is "none", the text cannot be selected.

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

Prohibit text from being selected in html

User-select: none | text | all | element

Value:

None: text cannot be selected

Text: you can select text

All: can be selected when all content as a whole. If you double-click or click a child element in the context, the selected section will be the highest ancestor element backtracking with that child element.

Element: text can be selected, but the selection range is constrained by element boundaries

Description:

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

2. This attribute is still not supported until Opera12.5, but like IE6-9, the private tag attribute unselectable= "on" is also supported to achieve the user-select:none effect; another value of unselectable is off.

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

4. The corresponding script feature is userSelect.

Html

User-select .test {padding: 10px;-webkit-user-select: none;-moz-user-select: none;-o-user-select: none; user-select: none; background: # eee;}

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.