鸟食轩

 Microsoft .NET[C#] MVP 2003
随笔 - 429, 文章 - 235, 评论 - 5527, 引用 - 356
数据加载中……

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

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

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

    1、 Select Input 

<input id="txb" type="text" value="Text Box"/> 
<href="#" onclick="document.getElementById('txb').select()">Select</a>

    2、this is a span.     Select Text

<span id="spn">this is a span.</span>
<href="#" onclick="SelectText();">Select</a>
<script language="javascript">
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>
<href="#" onclick="SelectControl();">Select</a>
<script language="javascript">
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 onselectstart="return false;">
    . . .
</body>

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

    解铃还须系铃人不是,既然onselectstart使用bubble up特性,那么我们同样在return false之前做检查就行了。比如我们要完全屏蔽页面的选择操作,但是input type=text、textarea内还需要使用选择,解决示例如下:
<body onselectstart="var srcElmt = event.srcElement; if ( srcElmt && ( srcElmt.tagName != 'INPUT' || srcElmt.tagName != 'TEXTAREA' ) return false;">
    . . .
</body>

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

posted on 2005-08-05 23:02 birdshome 阅读(4039) 评论(11)  编辑 收藏 网摘 所属分类: Jscript&Dhtml开发

评论

#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[未注册用户]



发表评论

昵称: [登录] [注册]

主页:

邮箱:(仅博主可见)

评论内容:

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 207785




相关文章:

相关链接: