为了在Web页面上使用文本搜索，在文本框内实现选择效果，在页面上屏蔽选择状态等。我们需要使用脚本(如JavaScript)来精确的控制页面中UI元素的选择状态。下面从操作元素选择区和屏蔽元素被选择两个方面来说一说。
操作元素选择区，我们可以使用对应对象的select()方法选择页面内容，其中包括INPUT元素中的内容、TextRange对象中的文字和controlRange Collection对象中的控件。
1、 Select Input
<
input
id
="txb"
type
="text"
value
="Text Box"
/>
<
a
href
="#"
onclick
="document.getElementById('txb').select()"
>Select
</
a
>
2、this is a span. Select Text
<
span
id
="spn"
>this is a span.
</
span
>
<
a
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
>
<
a
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
>
操作元素选择区，我们可以使用对应对象的select()方法选择页面内容，其中包括INPUT元素中的内容、TextRange对象中的文字和controlRange Collection对象中的控件。
1、 Select Input
<
input
id
="txb"
type
="text"
value
="Text Box"
/>
<
a
href
="#"
onclick
="document.getElementById('txb').select()"
>Select
</
a
>
2、this is a span. Select Text
<
span
id
="spn"
>this is a span.
</
span
>
<
a
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
>
<
a
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: 如果是模态窗口就不用自己去弄了，因为里面的元素本身就不能被选中。
本文转自博客园鸟食轩的博客，原文链接：http://www.cnblogs.com/birdshome/，如需转载请自行联系原博主。
