createTextRange()的使用总结

createTextRange()的使用总结

2010年02月01日 星期一 17:21

<script language="javascript">
function test()
{
var rng=document .body . createTextRange();
alert(rng .text)
}
function test1()
{
var rng=document .body . createTextRange();
alert(rng .htmlText)
}
</script>
<input type="button" οnclick="test()" value="text">
<input type="button" οnclick="test1()" value="htmlText">


获取指定文本框中的选中的文字：只响应第一个文本框

<input id="inp1" type="text" value="1234567890">
<input id="inp2" type="text" value="9876543210">
<input type="button" οnclick="test()" value="确定">
<script language="javascript">
function test()
{
var o=document . getElementById("inp1")
var r = document .selection .createRange();
if(o . createTextRange() .inRange(r))
alert(r .text);
}
</script>


页面文本倒序查找

abababababababa
<input value="倒序查找a" οnclick=myfindtext("a") type="button">
<script language ='javascript'>
var rng = document .body . createTextRange();
function myfindtext(text)
{
rng .collapse(false);
if(rng .findText(text,-1,1))
{
rng .select();
rng .collapse(true);
}else
{alert("end");}
}
</script>


聚焦控件后把光标放到最后

<script language="javascript">
function setFocus()
{
var obj = event .srcElement;
var txt =obj . createTextRange();
txt .moveStart('character',obj .value .length);
txt .collapse(true);
txt .select();
}
</script>
<input type="text" value="http://toto369 .net" οnfοcus="setFocus()">


得到文本框内光标位置

<script language="javascript">
function getPos(obj){
obj .focus();
var s=document .selection .createRange();
s .setEndPoint("StartToStart",obj . createTextRange())
alert(s .text .length);
}
</script>
<input type="text" id="txt1" value="1234567890">
<input type="button" value="得到光标位置" οnclick=getPos(txt1)>


控制input框内光标位置

<script language="javascript">
function setPos(num)
{
text1 .focus();
var e =document . getElementById("text5");
var r =e . createTextRange();
r .moveStart('character',num);
r .collapse(true);
r .select();
}
</script>
<input type="text" id="text5" value="1234567890">
<select οnchange="setPos(this .selectedIndex)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>


选中文本框中的一段文字

<script language=javascript>
function sel(obj,num)
{
var rng=obj . createTextRange()
var sel = rng .duplicate();
sel .moveStart("character", num);
sel .setEndPoint("EndToStart", rng);
sel .select();
}
</script>
<input type="text" id="text1" value="1234567890">
<select οnchange="sel(text1,this .value)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>


控制文本框内光标的移动

<input type="button" value="<" οnclick=go(-1)>
<input id="demo" value="这里是文字">
<input type="button" value=">" οnclick=go(1)>
<script language="javascript">
function go(n){
demo .focus();
with(document .selection .createRange())
{
moveStart("character",n);
collapse();
select();
}
}
</script>