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

  

你可能感兴趣的:(JavaScript,Web,UI,脚本)