资讯专栏INFORMATION COLUMN

通过CSS规则禁止选中文字

wangbjun / 1189人阅读

摘要:禁止选中文字在某些场景下还是有必要的,比如不想让他人复制自己的文章之类的。语法复制代码代码如下示例代码如下兼容性目前在以及以上版本的浏览器可以使用这个规则,但在更早版本的,我们只能通过实现禁止选中文本代码如下

禁止选中文字在某些场景下还是有必要的,比如不想让他人复制自己的文章之类的。这时候我们可以通过使用CSS+JS来解决这一问题。另外,这边要指出的是,user-select目前还不是W3C的正式标准,各个浏览器都是以私有属性的方式提供支持。

语法

Formal syntax: none | text | all | element

复制代码
代码如下:

(-prefix-)user-select: none;
(-prefix-)user-select: text;
(-prefix-)user-select: all;
(-prefix-)user-select: element;


示例
代码如下:

.row-of-icons {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */

/* No support for these yet,use at own risk */ -o-user-select: none; user-select: none; }

IE兼容性

目前在IE 10以及IE 10以上版本的浏览器可以使用-ms-user-select这个规则,但在更早版本的IE,我们只能通过javascript实现禁止选中文本:
代码如下:
$(el).attr("unselectable","on")
.css({"-moz-user-select":"-moz-none",
"-moz-user-select":"none",
"-o-user-select":"none",
"-khtml-user-select":"none", /* you could also put this in a class */
"-webkit-user-select":"none",/* and add the CSS class here instead */
"-ms-user-select":"none",
"user-select":"none"
}).bind("selectstart", function(){
return false;
});

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111864.html

相关文章

  • 通过CSS规则禁止选中文字

    摘要:禁止选中文字在某些场景下还是有必要的,比如不想让他人复制自己的文章之类的。语法复制代码代码如下示例代码如下兼容性目前在以及以上版本的浏览器可以使用这个规则,但在更早版本的,我们只能通过实现禁止选中文本代码如下 禁止选中文字在某些场景下还是有必要的,比如不想让他人复制自己的文章之类的。这时候我们可以通过使用CSS+JS来解决这一问题。另外,这边要指出的是,user-select目前还不是...

    ChristmasBoy 评论0 收藏0
  • Web前端开发标准规范

    摘要:页面名称月影功能模块,请在模块之间加入注释,中英文不做要求活动规则开始活动规则活动规则结束自定义函数。参考页面前端规范 web前端开发规范的意义 提高团队的协作能力 提高代码的复用利用率 可以写出质量更高,效率更好的代码 为后期维护提供更好的支持 一、命名规则 命名使用英文语义化,禁止使用特殊字符,禁止使用拼音,禁止使用中英文混合! 项目、目录、html/css/js等文件命名全...

    高璐 评论0 收藏0
  • Web前端开发标准规范

    摘要:页面名称月影功能模块,请在模块之间加入注释,中英文不做要求活动规则开始活动规则活动规则结束自定义函数。参考页面前端规范 web前端开发规范的意义 提高团队的协作能力 提高代码的复用利用率 可以写出质量更高,效率更好的代码 为后期维护提供更好的支持 一、命名规则 命名使用英文语义化,禁止使用特殊字符,禁止使用拼音,禁止使用中英文混合! 项目、目录、html/css/js等文件命名全...

    GHOST_349178 评论0 收藏0
  • Web前端开发标准规范

    摘要:页面名称月影功能模块,请在模块之间加入注释,中英文不做要求活动规则开始活动规则活动规则结束自定义函数。参考页面前端规范 web前端开发规范的意义 提高团队的协作能力 提高代码的复用利用率 可以写出质量更高,效率更好的代码 为后期维护提供更好的支持 一、命名规则 命名使用英文语义化,禁止使用特殊字符,禁止使用拼音,禁止使用中英文混合! 项目、目录、html/css/js等文件命名全...

    newtrek 评论0 收藏0

发表评论

0条评论

wangbjun

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<