关于createTextRange和createRange的一些用法
一、返回createTextRange的text和htmlText??
?
<mce:script language="javascript"><!--??
function test()??
{??
var rng=document.body.createTextRange();??
alert(rng.text)??
}??
function test1()??
{??
var rng=document.body.createTextRange();??
alert(rng.htmlText)??
}??
// --></mce:script>?
<input type="button" onclick="test()" value="text">?
<input type="button" onclick="test1()" value="htmlText">?
?
?
二、获取指定文本框中的选中的文字：只响应第一个文本框??
?
<input id="inp1" type="text" value="1234567890">?
<input id="inp2" type="text" value="9876543210">?
<input type="button" onclick="test()" value="确定">?
<mce:script language="javascript"><!--??
function test()??
{??
var o=document.getElementById("inp1")??
var r = document.selection.createRange();??
if(o.createTextRange().inRange(r))??
alert(r.text);??
}??
// --></mce:script>?
?
?
三、页面文本倒序查找??
?
abababababababa??
<input value="倒序查找a" onclick=myfindtext("a") type="button">?
<mce: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");}??
}??
// --></mce:script>?
?
?
四、聚焦控件后把光标放到最后??
?
<mce:script language="javascript"><!--??
function setFocus()??
{??
var obj = event.srcElement;??
var txt =obj.createTextRange();??
txt.moveStart('character',obj.value.length);??
txt.collapse(true);??
txt.select();??
}??
// --></mce:script>?
<input type="text" value="http://toto369.net" onfocus="setFocus()">?
?
?
五、得到文本框内光标位置??
?
<mce:script language="javascript"><!--??
function getPos(obj){??
obj.focus();??
var s=document.selection.createRange();??
s.setEndPoint("StartToStart",obj.createTextRange())??
alert(s.text.length);??
}??
// --></mce:script>?
<input type="text" id="txt1" value="1234567890">?
<input type="button" value="得到光标位置" onclick=getPos(txt1)>?
?
?
六、控制input框内光标位置??
?
<mce:script language="javascript"><!--??
function setPos(num)??
{??
text1.focus();??
var e =document.getElementById("text1");??
var r =e.createTextRange();??
r.moveStart('character',num);??
r.collapse(true);??
r.select();??
}??
// --></mce:script>?
<input type="text" id="text1" value="1234567890">?
<select onchange="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>?
?
?
七、选中文本框中的一段文字??
?
<mce: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();??
}??
// --></mce:script>?
<input type="text" id="text1" value="1234567890">?
<select onchange="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="<" onclick=go(-1)>?
<input id="demo" value="这里是文字">?
<input type="button" value=">" onclick=go(1)>?
<mce:script language="javascript"><!--??
function go(n){??
demo.focus();??
with(document.selection.createRange())??
{??
moveStart("character",n);??
collapse();??
select();??
}??
}??
// --></mce:script>?
?
九、取光标位置??
<body>?
<div id=box>点击textarea</div>???
<mce:script type="text/javascript"><!--??
function doit()??
{??
?var rng = event.srcElement.createTextRange();???
?rng.moveToPoint(event.x,event.y);???
?rng.moveEnd("character",event.srcElement.value.length)???
?box.innerText = "光标位置：" + (event.srcElement.value.length - rng.text.length)??
}??
// --></mce:script>?
<textarea onclick=doit() rows="6" cols="33">sdfsdfsdfsdfsdfsdfsdf?
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/starnight_cbj/archive/2009/02/03/3861105.aspx
