css不让用户选中文字

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

CSS不让用户选中文字,是一个常见的前端开发技巧。通常在网站中,一些文字是不能被用户进行复制、粘贴和选择的,如果用户拖拽鼠标选择文字,则会无法选中。 body { -webkit-user-selec

CSS不让用户选中文字,是一个常见的前端开发技巧。通常在网站中,一些文字是不能被用户进行复制、粘贴和选择的,如果用户拖拽鼠标选择文字,则会无法选中。

 body {
        -webkit-user-select:none; /* Safari */
        -moz-user-select:none; /* Firefox */
        -ms-user-select:none; /* IE10+/Edge */
        user-select:none; /* Standard syntax */
    } 

如上所示,使用CSS实现这个效果非常简单,只需要在style标签内或外部的CSS文件中添加以上代码即可。其中,-webkit-user-select:none;是针对Safari浏览器的,-moz-user-select:none;是针对Firefox浏览器的,-ms-user-select:none;是针对IE10+/Edge浏览器的,而user-select:none;是符合国际标准语法的。

这种技巧通常被用来保护网站的版权和文本内容,防止用户非法下载或复制网站上的内容。但需要注意的是,这种做法如果过度使用,可能会对用户体验造成一定的影响,用户可能会对这种网站产生不良印象,导致用户减少。

最后,需要提醒的是,这种技巧可以阻止用户选择或复制文本,但不代表文本就无法被恶意的爬虫程序或黑客获取。所以,正确的保护网站版权的方法,还需要结合其他的技术手段。

文章说明:

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

题图来自Unsplash,基于CC0协议

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

评论列表 评论
发布评论

评论: css不让用户选中文字

粉丝

0

关注

0

收藏

0

已有0次打赏