How to disable text selection in html-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to disable text selection in html

青灯夜游

Dec 13, 2021 pm 01:48 PM

html

In HTML, you can use the user-select attribute to prohibit text selection. You only need to add the "user-select:none;" style to the text element; the user-select attribute is used to set whether the user can select it. Text, when the value is "none" the text cannot be selected.

How to disable text selection in html

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

Forbid text to be selected in html

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

Copy after login

Value:

none:Text cannot be selected
text:Text can be selected
all :Can be selected when all content is taken as a whole. 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 boundaries

Description:

1. IE6-9 does not support this attribute, but supports using the label attribute onselectstart="return false;" to achieve 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, it also supports the use of private tag attributes unselectable="on" to achieve the effect of user-select:none; the other value of unselectable is off;

3, except Chrome In addition to Safari, in other browsers, if the text is set to -ms-user-select:none;, the user will not be able to start selecting text in 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 attribute is

userSelect.

html

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>user-select</title>
</head>
<style>
    .test {
        padding: 10px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;
        background: #eee;
    }
</style>
 
<body>
    <div onselectstart="return false;" unselectable="on">禁止选中文本内容</div>
</body>
 
</html>

Copy after login