利用CSS实现禁止双击选择页面内容的实例展示

2020-05-07 06:03:39易采站长站整理

CSS
#blog, #blog input, #blog textarea, #blog *[contenteditable=true] {
  -ms-user-select:none;
}

仅选择博客帖子内容
此选项针对其 ID 为 "blogPost" 的元素,将 -ms-user-select 设置为 "element",同时将博客作为整体,将 -ms-user-select 设置为 "none"。 这意味着,只能选择博客帖子文本。

CSS

复制代码#blogPost {
-ms-user-select:element;
}
blog {
-ms-user-select:none;
}

仅选择评论
此选项针对其类为 "comment" 的所有元素,将 -ms-user-select 设置为 "element",同时将博客作为整体,将 -ms-user-select 设置为 "none"。 这意味着,只能选择评论文本。

CSS

复制代码.comment {
-ms-user-select:element;
}
#blog {
-ms-user-select:none;
}.

在博客帖子或评论中启动选择,但可以扩展
此选项针对其 ID 为 "blogPost" 或其类为 "comment" 的所有元素,将 -ms-user-select 设置为 "text",同时将博客作为整体,将 -ms-user-select 设置为 "none"。这意味着,仅在博客帖子或评论中启动文本选择,但选择可扩展到任意这些区域之外。但是,文本选择无法在博客帖子或评论之外启动。

CSS

复制代码#blogPost, .comment {
-ms-user-select:text;
}
#blog {
-ms-user-select:none;
}

其他浏览器中的支持
编写本文时,Mozilla 和 WebKit 均支持带有其各自前缀的 user-select 属性版本。但是,在其实施中存在某些不同之处。谢谢阅读,希望能帮到大家,请继续关注软件开发网,我们会努力分享更多优秀的文章。