首页 > 开发 > CSS > 正文

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

2024-07-11 08:36:56
字体:
来源:转载
供稿:网友

在双击左右箭头,快速切换图片滚动时,会选择附近区域的文字,感觉不是很好,今天在同事在分享时,讲到了这个问题, 试了一下,不错,解决了问题。
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         在指定的元素内启动选择时,文本不可选择。但是,在指定的元素之外启动的文本选择仍可输入元素。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表