在Web页面中控制其元素的选择状态

    为了在Web页面上使用文本搜索，在文本框内实现选择效果，在页面上屏蔽选择状态等。我们需要使用脚本(如JavaScript)来精确的控制页面中UI元素的选择状态。下面从操作元素选择区和屏蔽元素被选择两个方面来说一说。

    操作元素选择区，我们可以使用对应对象的select()方法选择页面内容，其中包括INPUT元素中的内容、TextRange对象中的文字和controlRange Collection对象中的控件。

    1、 Select Input

<a href="#" onclick="document.getElementById('txb').select()">Select</a>

2、this is a span. Select Text

<a href="#" onclick="SelectText();">Select</a>

function SelectText()

{

var range = document.body.createTextRange();

range.findText("this is a span.");

range.select();

}

</script>

3、 Select Control

<select id="slt1"><option>select</option></select>

<select id="slt2"><option>select</option></select>

<a href="#" onclick="SelectControl();">Select</a>

function SelectControl()

{

var controlRange = document.body.createControlRange();

controlRange.add(document.getElementById('slt1'));

controlRange.add(document.getElementById('slt2'));

controlRange.select();

}

</script>

上面是主动操作页面元素的选择状态，下面说说怎么屏蔽页面中的选中状态。

在IE5.5及以上版本中，我们可以使用这两种方便的方法来屏蔽对元素的选择。一是使用元素的属性unselectable，另一种方法是使用元素的事件onselectstart。比如我们让一个span内的文字不能不选择，我们可以使用：

<span unselectable="on">这是一段不能被选中的文本。</span>

或者使用：

<span onselectstart="return false;">这也是一段不能被选中的文本。</span>

这两种方法有什么异同呢？第一种使用unselectable属性，只能使该元素内的直接内容不能被选中，如果里面包含子元素，子元素内容不受影响；使用onselectstart事件，由于IE本身使用bubble up事件处理模型，使用这种方法，将可以屏蔽掉容器元素内任何元素的被选择特性。但是这两个方法却都有一个共同的缺陷，就是如果选择开始于被屏蔽元素之外时，这些被屏蔽的元素还是可以被选中

。看下面的事例：

    这是一段不能被选中的文本。(子元素文本例外)

    这也是一段不能被选中的文本。(子元素文本依旧)

    如果我们使用鼠标在蓝框或绿框内托拽，我们是不能选中内部文本的，同时如果我们选中了其它的元素，点击蓝框内部，不能取消其它元素的选中状态；点击绿框内部则可以取消。可是如果我们使用鼠标从框外开始选取，或者直接按Ctrl+A，这两个本身已经屏蔽选择状态的元素，还是被选中了

。所以我们如果要屏蔽页面的任何选取操作，最简单的方法就是在body元素上添加onselectstart="return false;"。这样就是不管使用什么方法，也不能选中页面里的元素了

。

. . .

</body>

这样一来似乎是一劳永逸了，可是当我们使用input type=text、textarea等控件时，我们会发现这里面也不能使用选择操作了，真是晕死！怎么办呢？

解铃还须系铃人不是，既然onselectstart使用bubble up特性，那么我们同样在return false之前做检查就行了。比如我们要完全屏蔽页面的选择操作，但是input type=text、textarea内还需要使用选择，解决示例如下：

. . .

</body>

BTW: 如果是模态窗口就不用自己去弄了，因为里面的元素本身就不能被选中。

posted on 2005-08-05 23:02 birdshome 阅读(4676) 评论(12) 编辑收藏

#1楼  　回复　 引用　 查看　

第三个为什么就选择了一个呀

2005-08-07 14:59 | 蛙蛙池塘

#2楼  　回复　 引用　 查看　

蛙赛，很专业呀，这么细小的问题都研究呀，偶以前确实没有考虑过，呵呵，不过别人还是有办法选择内容的，除非你把网页的文字用directx的方式显示出来，防止截屏，否则就算不让选择还可以保存源码修改，如果用activex显示文字，人家还可以截取屏幕，然后OCR，除非不让截屏，不过现在有些软件DIRECTX的图像也能获取。

2005-08-07 15:05 | 蛙蛙池塘

#3楼 [楼主] 　回复　 引用　 查看　

@蛙蛙池塘
第三个select确实只能选中controlRange集合中index=0的那个控件，不知道是不是bug还是M$有别的考虑。

比较精确的控制元素的选择状态不是为了防止用户copy，而是为了界面美观，比如你自己的grid,chart什么的控件本身支持选择状态，同时用户又可以使用IE的选择特性，这时多种选择重合在一起，页面就变得非常的ugly的说:(

2005-08-07 16:25 | birdshome

#4楼  　回复　 引用　

以前也碰到过这类问题，惭愧没有深入研究，这不楼主代劳了，呵呵，感谢！

2005-08-08 11:23 | jhyc[未注册用户]

#5楼  　回复　 引用　 查看　

不错呀，学习

2005-08-27 17:32 | Duiker

#6楼  　回复　 引用　

<body onselectstart="var srcElmt = event.srcElement; if ( srcElmt && ( srcElmt.tagName != 'INPUT' || srcElmt.tagName != 'TEXTAREA' ) return false;">
. . .
</body>
这个好像不行哦.... QQ:87505051

2005-10-25 15:49 | Riker[未注册用户]

#7楼  　回复　 引用　 查看　

搂主，我想让别人禁止选择我select中的某一项，这该怎么做呢？

2006-07-19 11:21 | daniel-shen

#8楼  　回复　 引用　

firefox下无效

2007-12-30 20:09 | semious[未注册用户]

#9楼  　回复　 引用　

Can not run under FireFox..

2008-06-05 17:03 | Einstein_Ian[未注册用户]

#10楼  　回复　 引用　

嘿嘿,我见过一个狠的,直接用setTimeout清理
range||getSelection

2008-10-13 16:09 | wc[未注册用户]

#11楼  　回复　 引用　

FK the fking firefox!!!

2009-12-28 10:50 | BTW[未注册用户]

注册用户登录后才能发表评论，请登录或注册，返回博客园首页。

首页博问闪存新闻园子招聘知识库

最新IT新闻:
· 最想要的Entity Framework功能
· 专访Jeffrey Richter：Windows 8是微软的重中之重
· 《福布斯》：谷歌进军硬件产品难撼动苹果地位
· 美国空军拟最多购买1.8万台iPad 2
· 分析称专利之争让谷歌苹果两败俱伤
» 更多新闻...

» 更多知识库文章...

China-pub 2011秋季教材巡展
China-Pub 计算机绝版图书按需印刷服务

#1楼  　回复　 引用　 查看

#2楼  　回复　 引用　 查看

#3楼 [楼主] 　回复　 引用　 查看

#4楼  　回复　 引用

#5楼  　回复　 引用　 查看

#6楼  　回复　 引用

#7楼  　回复　 引用　 查看

#8楼  　回复　 引用

#9楼  　回复　 引用

#10楼  　回复　 引用

#11楼  　回复　 引用

鸟食轩

在Web页面中控制其元素的选择状态

评论

导航

公告

搜索

常用链接

我的标签

随笔分类(337)

文章分类(147)

相册

Ex-Colleagues

常用链接

兄弟情深

积分与排名

最新评论

阅读排行榜

推荐排行榜

评论

#3楼[楼主] 回复 引用 查看

导航

公告

搜索

常用链接

我的标签

随笔分类(337)

文章分类(147)

相册

Ex-Colleagues

常用链接

兄弟情深

积分与排名

最新评论

阅读排行榜

推荐排行榜

#3楼 [楼主] 　回复　引用　查看　