2008-05-31

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

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

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

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

 2:

<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 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>

  

评论
发表评论

您还没有登录，请登录后发表评论

beyondsanli
搜索本博客
我的相册
Be4dd72d-74eb-3b6c-bd66-8c88bf719186-thumb
CIMG0924
共 34 张
存档
最新评论