您的位置:首页 > Web前端 > JavaScript

javascript中createTextRange用法,得到input及textarea光标位置

2010-06-03 17:06 537 查看
返回createTextRange的text和htmlText

<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" 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="确定">

<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" onclick=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" onfocus="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="得到光标位置" onclick=getPos(txt1)>


控制input框内光标位置

<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();

}

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


选中文本框中的一段文字

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

<script language="javascript">

function go(n){

demo.focus();

with(document.selection.createRange())

{

moveStart("character",n);

collapse();

select();

}

}

</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: