爲了在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 <script language="javascript" type="text/javascript"> function SelectText() { var range = document.body.createTextRange(); range.findText("this is a span."); range.select(); } </script>
![]()
<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 <script language="javascript" type="text/javascript"> function Select() { var controlRange = document.body.createControlRange(); controlRange.add(document.getElementById('slt1')); controlRange.add(document.getElementById('slt2')); controlRange.select(); } </script>
![]()
<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: 如果是模態窗口就不用自己去弄了，因爲裏面的元素本身就不能被選中。
操作元素選擇區，我們可以使用對應對象的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 <script language="javascript" type="text/javascript"> function SelectText() { var range = document.body.createTextRange(); range.findText("this is a span."); range.select(); } </script>
<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 <script language="javascript" type="text/javascript"> function Select() { var controlRange = document.body.createControlRange(); controlRange.add(document.getElementById('slt1')); controlRange.add(document.getElementById('slt2')); controlRange.select(); } </script>
<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: 如果是模態窗口就不用自己去弄了，因爲裏面的元素本身就不能被選中。
