Heim > Web-Frontend > CSS-Tutorial > Hauptteil

css实现禁止页面文字被选中功能

王林
Freigeben: 2020-09-30 16:40:34
nach vorne
2231 Leute haben es durchsucht

css实现禁止页面文字被选中功能

通过css实现页面文字不能被选中

(推荐教程:CSS教程

.cannotselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
Nach dem Login kopieren

css介绍

user-select

说明

控制选取能否被选择.

该特性是非标准的,请尽量不要在生产环境中使用它!

Formal syntax: none | text | all | element
Nach dem Login kopieren

none:元素内的文字及其子元素将不会被选中
text:用户可以选中文字
all:在一个HTML编辑器中,当双击子元素或者上下文时,那么包含该子元素的最顶层元素也会被选中。
element:火狐和IE中有效. Enables selection to start within the element; however, the selection will be contained by the bounds of that element.

浏览器兼容性

0d0dd42ae134fa7a7864034d7b019fc.png

-webkit-touch-callout

说明

这个CSS 属性禁用了默认的callout展示, callout是指当触摸并按住一个元素的时候出现的提示。

当在iOS上一直按住一个目标元素时,Safari会展示一个关于这个链接的callout信息。webkit-touch-callout属性允许禁用掉这一行为。

-webkit-touch-callout 属性最早在 iOS 2.0 上实现,后来被添加到WebKit

允许的值

default:此值表示显示默认的callout
none:此值表示禁用callout

浏览器兼容性

9a53f8323f7d9f0a5fd37d2eb1b5a55.png

Das obige ist der detaillierte Inhalt voncss实现禁止页面文字被选中功能. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!