css不允许用户选中

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中有一个属性user-select可以让开发者控制用户是否能够选中网页中的文字。常用的属性值有三种:none、auto和text。其中,text是默认值,表示用户能够选中页面中的文字。而使用no

CSS中有一个属性user-select可以让开发者控制用户是否能够选中网页中的文字。常用的属性值有三种:none、auto和text。其中,text是默认值,表示用户能够选中页面中的文字。

而使用none值可以禁止用户选中文字。比如,可以使用下面的代码让一段文字无法选中:

 p {
        -webkit-user-select: none;  /* Chrome/Safari/Opera */
        -moz-user-select: none;     /* Firefox */
        -ms-user-select: none;      /* IE/Edge */
        user-select: none;          /* 所有浏览器 */
    } 

值得注意的是,虽然使用了user-select: none让网页中的文字无法被选中,但是页面的内容仍然能够被复制。这个时候,用户只需要使用鼠标右键点击文字,选择“复制”即可把文字复制到剪切板中。

在实际的开发中,禁止用户选中文字的场景有很多。比如,有些网站希望用户不要轻易的复制文字内容,防止抄袭。又比如,在游戏界面中可能希望一些元素无法被选中,以免影响游戏体验。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css不允许用户选中

粉丝

0

关注

0

收藏

0

已有0次打赏