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

所属分类: 网页制作 / CSS 阅读数: 286
收藏 0 赞 0 分享

在双击左右箭头,快速切换图片滚动时,会选择附近区域的文字,感觉不是很好,今天在同事在分享时,讲到了这个问题, 试了一下,不错,解决了问题。
IE及Chrome下的方法一样,对相应的元素添加onselectstart=”return false;”但是,这个在火狐下不起作用,但是火狐下可以用css样式来达到这个效果,即添加-moz-user-select:none;就可以兼容ie,google,firefox了,即代码如下所示:


复制代码
代码如下:
<div class="picBox" onselectstart="return false;" style="-moz-user-select:none;">屏蔽双击选中文字的区域</div>

这样这个区域的文字都不能选中了,就也不会出现在双击左右箭头快速切换图片滚动时会选择附近区域文字的情况了
如果把


复制代码
代码如下:
<body onselectstart="return false">


复制代码
代码如下:
body
{
-moz-user-select: none;
}

添加到body中,就实现了禁止用户选中页面上内容的效果

css禁止双击页面选中文本
-ms-user-select 属性是一个新的级联样式表 (CSS) 属性,它使 Web 开发人员和应用开发人员能够控制用户在其网页或使用 JavaScript 的 Windows 应用商店应用中选择文本的位置。 本主题介绍如何在你自己的网页上实施 -ms-user-select 属性。(采用完全相同的方法在使用 JavaScript 的 Windows 应用商店应用中实施 -ms-user-select 属性。)它包含以下几部分:

Note  user-select 属性当前不是任何万维网联合会 (W3C) CSS 规范的一部分。该属性最初是在 CSS3 的用户界面模块中提出的,但是该模块已被不包含 user-select 属性的 CSS3 基本用户界面模块所取代。其他主要的浏览器支持带有其各自前缀的此属性版本。这三个实现之间存在细微区别,因此请确保在不同的浏览器中测试你的应用程序。

简介
在网页上选择文本的功能在许多用户方案中非常重要。请考虑一个典型的新闻站点。大多数页面包含新闻文章,由于用户希望共享内容而想要选择文章的内容。但是,页面还可能包含用户不需要或不希望选择的菜单、广告和指向站点其他部分的链接。Internet Explorer 10 中引入对新 -ms-user-select CSS 属性的支持以后,你可以指定允许在何处使用文本选择功能,例如在新闻文章的正文中允许使用,但在菜单中不允许使用。

使用 -ms-user-select
-ms-user-select 属性具有四个可能值:

 

关键字       Description
element    在指定的元素内启动选择时,文本是可选择的。但是,文本选择限制在该元素的边界内。
none         在指定的元素内启动选择时,文本不可选择。但是,在指定的元素之外启动的文本选择仍可输入元素。
text            在指定的元素内启动选择时,文本是可选择的。文本选择未限制在元素的边界内,并且可以越过其边界。
auto         这是初始值。如果元素包含可编辑文本,例如 input 元素或其 contenteditable 设置为 "true" 的元素,则该文本是可选择的。否则,选择由父节点的 -ms-user-select 属性的值确定。

 

返回到我们的新闻站点方案,例如,你可以在整个页面上将 -ms-user-select 设置为 "none",然后在主文章上将 -ms-user-select 设置为 "element"。这样做,则只有文章文本是可选择的。希望选择新闻文章的内容的人们可能不希望选择刚刚过去的文章的页脚元素。因此,将 -ms-user-select 设置为 "element",这样使得这些用户可以只轻松选择文章的内容,但不必担心光标放置位置是否完全正确。对于通过触摸导航的用户,这一点尤其重要。

你可以通过将 -ms-user-select 设置为 "none",在任何页面元素内关闭文本选择。用户将无法在指定的文本块内启动选择。但是,如果用户在页面的其他区域上启动文本选择,则可以在页面的任何区域内继续选择,其中包括将 -ms-user-select 设置为 "none" 的区域。

示例实施
IE Test Drive 具有正在使用的 -ms-user-select 属性的实例演示。该演示展示了一个博客帖子的实例模型,其中具有几个不同的文本内容区域:作为整体的博客 ("#blog"),由博客帖子 ("#blogPost") 和几条评论 (".comment") 组成。每个区域依次由不同类型的文本元素组成,其中包括 input 和 textarea 元素以及其 contenteditable 属性设置为 "true" 的元素。

页面左侧的弹出菜单具有几个选项,这些选项用于设置页面元素上的 -ms-user-select。让我们简要地浏览一下演示内弹出菜单中列出的选项。

正常选择
此选项指示未在页面上的任何元素上设置 -ms-user-select。用户可自由选择任意所选元素中的文本。

关闭除可编辑内容外的选择
此选项将博客(作为整体)的 -ms-user-select 设置为 "none"。这意味着,不可选择除了可编辑区域内的文本之外的任何内容,例如“名称”和“评论”字段。

CSS
#blog {
  -ms-user-select:none;
}在任何位置关闭选择
此选项针对所有元素将 -ms-user-select 设置为 "none",这次将包含用户输入字段(input 和 textarea 元素),以及contenteditable 设置为 true 的其他所有元素。这意味着,不可选择任何内容,包括可编辑区域中的文本。

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 属性版本。但是,在其实施中存在某些不同之处。谢谢阅读,希望能帮到大家,请继续关注脚本之家,我们会努力分享更多优秀的文章。

更多精彩内容其他人还在看

CSS入门教程:计算CSS盒模型宽和高

 出处:当我们布局一个网页的时候,经常会遇到这样的一种情况,那就是最终网页成型的宽度或是高度会超出我们预先的计算,其实就就是所谓的CSS的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;}
收藏 0 赞 0 分享

在IE流览器中正确显示PNG透明图片

  png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利!   但目前IE中对于插入
收藏 0 赞 0 分享

CSS教程:DIV底部放置文字

  css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近的距离还可以精确到像素,自己可以调节,是不是很不错呢?
收藏 0 赞 0 分享

如何用CSS让文字居于div的底部

  这个问题是别人提出的,因为css对文字的布局上没有靠容器底部对齐的参数,(或许有但是我没有发现)不过目前我使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,我用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近
收藏 0 赞 0 分享

从A页面连接到B页面后并直接把B页面的隐藏层显示

  这个效果实现的是,在B页面里有两个层,一个显示层,我们暂定名c层,一个是隐藏层,我们暂定名d层,单独进B页面的时候,c层显示,d层隐藏,然而从A页面连接到B页面的时候,则是让d层显示,c层隐藏,我觉得这个效果对网页设计者以后会有很大帮助,现在把代码发出来,
收藏 0 赞 0 分享

CSS样式表定义标签li前面样式

定义LI前面的小点样式 view plaincopy to clipboardprint? 语法: list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lowe
收藏 0 赞 0 分享

符合标准的div css制作的弹出菜单

本文介绍了五款符合标准的div css制作的弹出菜单,而且不含有js的. NO.1最基本的:二级dropdown弹出菜单 <!DOCTYPE html PUB
收藏 0 赞 0 分享

CSS实现在文章每段后面加入带连接的隐藏文字

代码主要理解3个参数:createElement、createTextNode、appendChild。这3个js参数分别是创建元素、创建字符、追加节点。代码原理:循环页面段落标签<p>,创建连接元素<a>,创建要显示的连接字符,用SetAttribute
收藏 0 赞 0 分享

CSS:浏览器特定选择器介绍

当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child html {} * html {} 只对IE 7 *:first-child html {} 只对IE 7
收藏 0 赞 0 分享

WEB标准学习,认识两种网页声明的含义

即网页标准推出来以后,我们时常会看到两种不同的网页的声明,一个是Dhtml,一个是Xhtml。如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht
收藏 0 赞 0 分享
查看更多