為了在Web頁面上使用文本搜尋,在文本框内實作選擇效果,在頁面上屏蔽選擇狀态等。我們需要使用腳本(如JavaScript)來精确的控制頁面中UI元素的選擇狀态。下面從操作元素選擇區和屏蔽元素被選擇兩個方面來說一說。
操作元素選擇區,我們可以使用對應對象的select()方法選擇頁面内容,其中包括INPUT元素中的内容、TextRange對象中的文字和controlRange
Collection對象中的控件。
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLl52bO9CXzJ3b0F2YpRmbJdmbp5WasRXdP9CXzV2Zh1WSvwVbvNmLzd2bsJmbj5yd3d3Lc9CX6MHc0RHaiojIsJye.gif)
<input id="txb" type="text" value="Text Box"/>
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLl52bO9CXzJ3b0F2YpRmbJdmbp5WasRXdP9CXzV2Zh1WSvwVbvNmLzd2bsJmbj5yd3d3Lc9CX6MHc0RHaiojIsJye.gif)
<a href="#" onclick="document.getElementById('txb').select()">Select</a>
2、this is a
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLl52bO9CXzJ3b0F2YpRmbJdmbp5WasRXdP9CXzV2Zh1WSvwVbvNmLzd2bsJmbj5yd3d3Lc9CX6MHc0RHaiojIsJye.gif)
<span id="spn">this is a span.</span>
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLl52bO9CXzJ3b0F2YpRmbJdmbp5WasRXdP9CXzV2Zh1WSvwVbvNmLzd2bsJmbj5yd3d3Lc9CX6MHc0RHaiojIsJye.gif)
<a href="#" onclick="SelectText();">Select</a>
<script language="javascript">
function SelectText()
{
var range = document.body.createTextRange();
range.findText("this is a span.");
range.select();
}
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLl52bO9CXzJ3b0F2YpRmbJdmbp5WasRXdP9CXzV2Zh1WSvwVbvNmLzd2bsJmbj5yd3d3Lc9CX6MHc0RHaiojIsJye.gif)
</script>
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLl52bO9CXzJ3b0F2YpRmbJdmbp5WasRXdP9CXzV2Zh1WSvwVbvNmLzd2bsJmbj5yd3d3Lc9CX6MHc0RHaiojIsJye.gif)
<select id="slt1"><option>select</option></select>
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLl52bO9CXzJ3b0F2YpRmbJdmbp5WasRXdP9CXzV2Zh1WSvwVbvNmLzd2bsJmbj5yd3d3Lc9CX6MHc0RHaiojIsJye.gif)
<select id="slt2"><option>select</option></select>
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLl52bO9CXzJ3b0F2YpRmbJdmbp5WasRXdP9CXzV2Zh1WSvwVbvNmLzd2bsJmbj5yd3d3Lc9CX6MHc0RHaiojIsJye.gif)
<a href="#" onclick="SelectControl();">Select</a>
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLl52bO9CXzJ3b0F2YpRmbJdmbp5WasRXdP9CXzV2Zh1WSvwVbvNmLzd2bsJmbj5yd3d3Lc9CX6MHc0RHaiojIsJye.gif)
function SelectControl()
var controlRange = document.body.createControlRange();
controlRange.add(document.getElementById('slt1'));
controlRange.add(document.getElementById('slt2'));
controlRange.select();
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLl52bO9CXzJ3b0F2YpRmbJdmbp5WasRXdP9CXzV2Zh1WSvwVbvNmLzd2bsJmbj5yd3d3Lc9CX6MHc0RHaiojIsJye.gif)
上面是主動操作頁面元素的選擇狀态,下面說說怎麼屏蔽頁面中的選中狀态。
在IE5.5及以上版本中,我們可以使用這兩種友善的方法來屏蔽對元素的選擇。一是使用元素的屬性unselectable,另一種方法是使用元素的事件onselectstart。比如我們讓一個span内的文字不能不選擇,我們可以使用:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLl52bO9CXzJ3b0F2YpRmbJdmbp5WasRXdP9CXzV2Zh1WSvwVbvNmLzd2bsJmbj5yd3d3Lc9CX6MHc0RHaiojIsJye.gif)
<span unselectable="on">這是一段不能被選中的文本。</span>
或者使用:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLl52bO9CXzJ3b0F2YpRmbJdmbp5WasRXdP9CXzV2Zh1WSvwVbvNmLzd2bsJmbj5yd3d3Lc9CX6MHc0RHaiojIsJye.gif)
<span onselectstart="return false;">這也是一段不能被選中的文本。</span>
這兩種方法有什麼異同呢?第一種使用unselectable屬性,隻能使該元素内的直接内容不能被選中,如果裡面包含子元素,子元素内容不受影響;使用onselectstart事件,由于IE本身使用bubble
up事件處理模型,使用這種方法,将可以屏蔽掉容器元素内任何元素的被選擇特性。但是這兩個方法卻都有一個共同的缺陷,就是如果選擇開始于被屏蔽元素之外時,這些被屏蔽的元素還是可以被選中
。看下面的事例:
這是一段不能被選中的文本。(子元素文本例外)
這也是一段不能被選中的文本。(子元素文本依舊)
如果我們使用滑鼠在藍框或綠框内托拽,我們是不能選中内部文本的,同時如果我們選中了其它的元素,點選藍框内部,不能取消其它元素的選中狀态;點選綠框内部則可以取消。可是如果我們使用滑鼠從框外開始選取,或者直接按Ctrl+A,這兩個本身已經屏蔽選擇狀态的元素,還是被選中了
。是以我們如果要屏蔽頁面的任何選取操作,最簡單的方法就是在body元素上添加onselectstart="return
false;"。這樣就是不管使用什麼方法,也不能選中頁面裡的元素了
。
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLl52bO9CXzJ3b0F2YpRmbJdmbp5WasRXdP9CXzV2Zh1WSvwVbvNmLzd2bsJmbj5yd3d3Lc9CX6MHc0RHaiojIsJye.gif)
<body onselectstart="return false;">
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLl52bO9CXzJ3b0F2YpRmbJdmbp5WasRXdP9CXzV2Zh1WSvwVbvNmLzd2bsJmbj5yd3d3Lc9CX6MHc0RHaiojIsJye.gif)
. . .
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLl52bO9CXzJ3b0F2YpRmbJdmbp5WasRXdP9CXzV2Zh1WSvwVbvNmLzd2bsJmbj5yd3d3Lc9CX6MHc0RHaiojIsJye.gif)
</body>
這樣一來似乎是一勞永逸了,可是當我們使用input
type=text、textarea等控件時,我們會發現這裡面也不能使用選擇操作了,真是暈死!怎麼辦呢?
解鈴還須系鈴人不是,既然onselectstart使用bubble up特性,那麼我們同樣在return
false之前做檢查就行了。比如我們要完全屏蔽頁面的選擇操作,但是input type=text、textarea内還需要使用選擇,解決示例如下:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLl52bO9CXzJ3b0F2YpRmbJdmbp5WasRXdP9CXzV2Zh1WSvwVbvNmLzd2bsJmbj5yd3d3Lc9CX6MHc0RHaiojIsJye.gif)
<body onselectstart="var srcElmt = event.srcElement; if ( srcElmt && ( srcElmt.tagName != 'INPUT' || srcElmt.tagName != 'TEXTAREA' ) return false;">
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLl52bO9CXzJ3b0F2YpRmbJdmbp5WasRXdP9CXzV2Zh1WSvwVbvNmLzd2bsJmbj5yd3d3Lc9CX6MHc0RHaiojIsJye.gif)
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLl52bO9CXzJ3b0F2YpRmbJdmbp5WasRXdP9CXzV2Zh1WSvwVbvNmLzd2bsJmbj5yd3d3Lc9CX6MHc0RHaiojIsJye.gif)
BTW:
如果是模态視窗就不用自己去弄了,因為裡面的元素本身就不能被選中。
本文轉自部落格園鳥食軒的部落格,原文連結:http://www.cnblogs.com/birdshome/,如需轉載請自行聯系原部落客。