How to prevent text from being selected and copied using css? (code example)

In front-end development, sometimes there will be a situation: after double-clicking the text, the text will be selected, which is very ugly, not beautiful at all, and very inconvenient; and sometimes on some web page modules we just It is necessary that the text cannot be selected or copied.

So how to realize this requirement and prevent the text from being selected or copied? This article will introduce you to the CSS method to prevent text from being selected and copied. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

css The method of prohibiting text from being selected and copying is actually very simple. We can use the user-select attribute to complete it. Let’s take a look at this property.

The user-select attribute is a new attribute in CSS3. It can be used to control the selectability of content, set or retrieve whether users are allowed to select text, and applies to all elements except replacement elements.

Basic syntax:

user-select:value;

You can set the following attribute values:

auto: Default value, text The selection will be based on the browser's default attributes;

none: can be set to allow the user to not select anything in the element;

text: Setting Users can select the text in the element;

element:Set the text to be optional, but the selection range is constrained by the element boundary (this attribute value is only supported by IE and FF)

all: Can be selected when all content as a whole is selected. If a double-click or contextual click occurs on a child element, the child element's highest ancestor element going back up will be selected. To put it simply: the target element will be selected as a whole, not just a part. The browser will automatically select the content in the entire element.

-moz-none: Firefox private attribute value, setting the text of elements and sub-elements will not be optional; however, sub-elements can be re-set to optional through text.

Browser support

The above figure lists when the value of the user-select attribute is none|text|all The degree of support of each browser in this case; when the attribute value is element, most browsers do not support it, so it is not listed.

Below we use a simple code example to introduce the css user-select attribute to implement the method of prohibiting text from being selected and copying, considering compatibility.

Disable text from being selected Copy code 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>

Instructions:

Because IE6-9 does not support the user-select attribute, if you want to implement user-select:none, that is, prohibiting text from being selected and copying, you can use The tag attribute onselectstart="return false;" is implemented; Safari and Chrome also support this tag attribute.

Summary: The above is the entire content of the css implementation introduced in this article to prohibit text from being selected and copying. You can try it yourself to deepen your understanding of the user-select attribute. . I hope it will be helpful to everyone's learning. For more related tutorials, please visit: CSS video tutorial, HTML video tutorial, bootstrap video tutorial!

The above is the detailed content of How to prevent text from being selected and copied using css? (code example). For more information, please follow other related articles on the PHP Chinese website!