js源码--createTextRange

本文详细介绍如何在HTML文本框中实现光标的精确定位及文本选择功能,包括使用JavaScript进行光标位置的获取与设置、文本的选择以及字符的查找等实用操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<meta name="GENERATOR" content="Microsoft FrontPage 4.0"> 
<meta name="ProgId" content="FrontPage.Editor.Document"> 
<title>光标位置-www.0097.org</title> 
<style> 
INPUT
{border: 1 solid #000000} 
BODY,TABLE
{font-size: 10pt} 
</style> 
</head> 
<body> 
<table border="0" width="700" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="479" rowspan="7"> 
点击 TextArea 实现光标定位 
<p> 
<textarea rows="7" cols="49" id="box" onclick=tellPoint()>我怕来不及我要抱着你,直到感觉你的绉纹有了岁月的痕迹,直到视线变得模糊直到不能呼吸 
为了你我愿意 
动也不能动也要看着你,直到感觉你的发线有了白雪的痕迹,直到肯定你是真的直到失去力气让我们形影不离 
如果全世界我也可以放弃,至少还有你值得我去珍惜而你在这里就是生命的奇迹 
也许全世界我也可以忘记,就是不愿意失去你的消息你掌心的痣我总记得在哪里 
我们好不容易我们身不由已,我怕时间太快不够将你看仔细,我怕时间太慢日夜担心失去你恨不得一夜之间白头永不分离 
</textarea> 

<script> 

function movePoint() 

var pn = parseInt(pnum.value); 

if(isNaN(pn)) 
return

var rng = box.createTextRange();
   
   / /rng.findText("你");                       下面有解释

rng.moveStart(
"character",pn); 

rng.collapse(
true);                      //ture为光标指示到起点,false光标指示到终点

rng.select();                                 //同样可以用rng.move(
"character",pn)来实现无需上一步

returnCase(rng) 

}
 

function tellPoint() 

var rng = event.srcElement.createTextRange(); 

rng.moveToPoint(event.x,event.y); 
rng.moveStart(
"character",-event.srcElement.value.length) 

pnum.value 
= rng.text.length 

returnCase(rng) 
}
 


function returnCase(rng) 

bh.innerText 
= rng.boundingHeight; 
bl.innerText 
= rng.boundingLeft; 
bt.innerText 
= rng.boundingTop; 
bw.innerText 
= rng.boundingWidth; 
ot.innerText 
= rng.offsetTop; 
ol.innerText 
= rng.offsetLeft; 
t.innerText 
= rng.text; 
}
 


function selectText(sp,ep) 

sp 
= parseInt(sp) 
ep 
= parseInt(ep) 

if(isNaN(sp)||isNaN(ep)) 
return

var rng = box.createTextRange(); 

rng.moveEnd(
"character",-box.value.length)   //这里要注意-length是让光标的起始点和终止点都回到起                                                                                        始处
rng.moveStart(
"character",-box.value.length) 

rng.collapse(
true); 

rng.moveEnd(
"character",ep)                            //注意的是先后顺序
rng.moveStart(
"character",sp) 

rng.select(); 

returnCase(rng); 
}
 

var rg = box.createTextRange(); 

function findText(tw) 

if(tw==""
return

var sw = 0

if(document.selection) 

sw 
= document.selection.createRange().text.length; 
}
 

rg.moveEnd(
"character",box.value.length); 

rg.moveStart(
"character",sw); 


if(rg.findText(tw)) 

rg.select(); 

returnCase(rg); 
}
 

if(rg.text!=tw) 

alert(
"已经搜索完了"
rg 
= box.createTextRange() 
}
 

}
 

</script> 
</p> 
<p></p> 
光标位置:
<input type="text" value="0" id="pnum" size="8"> <input type="button" onclick="movePoint()" value="移动光标到指定位置"> 
<p></p> 
选择指定范围:
<input type="text" size="9" id="sbox"> -- <input type="text" size="9" id="ebox"> <input type="button" onclick="selectText(sbox.value,ebox.value)" value="选择"> 
<p></p> 
选择查找字符 :
<input type="text" value="" id="cbox" size="8"> <input type="button" onclick="findText(cbox.value)" value="查找下一个并选择"> 

</td> 
<td width="217">boundingHeight: <span id="bh"></span></td> 
</tr> 
<tr> 
<td width="217">boundingWidth: <span id="bw"></span></td> 
</tr> 
<tr> 
<td width="217">boundingTop: <span id="bt"></span></td> 
</tr> 
<tr> 
<td width="217">boundingLeft: <span id="bl"></span></td> 
</tr> 
<tr> 
<td width="217">offsetLeft: <span id="ol"></span> </td> 
</tr> 
<tr> 
<td width="217">offsetTop: <span id="ot"></span> </td> 
</tr> 
<tr> 
<td width="217">text: <span style="position: absolute; z-index: 10" id="t"></span> </td> 
</tr> 
</table> 
</body> 

</html> 
 
经过多次调试才弄明白,当光标move时,它的开始和结束点是重合的,
所以如果move的话那它的头和尾的光标在一起,如果要选择区域的话就要两者都设,比如
rng.move("character",2);
rng.moveEnd("character",2);
rng.select()显示高亮,
如果我们没有将光标移动也就是(var rng = box.createTextRange())状态,
那它的光标起始在头部,结束在尾部(可以负移动moveEnd),所以你moveStart就可以选择到文本最后的高亮,
而如果我们已经将光标有所移动比如:rng.findText("你");这样光标的起始和终点其实也是已经重合在了一起,
这个时候你moveStart不动的话那就必须要通过移动moveEnd来显示高亮,
<!-- 欢迎转载,请保留作者和出处,谢谢 -->---------------我注明是摘自LxcJie的专栏:)
<HTML>
<STYLE>
.notChangePartValue
{
    input:expression(regInput(
this));
}

</STYLE>
<SCRIPT language="javascript">
function regInput(obj)
{
    obj.ondrop 
= function(){return false;}
    obj.oncontextmenu 
= function(){return false;}
    obj.onkeydown 
= function()
    
{
        restrictInputValue(obj)
    }

}


function restrictInputValue(obj)
{
    
var range = obj.createTextRange();

    if(typeof(obj.initWidth) == "undefined")
    
{
        obj.initWidth 
= range.boundingWidth;
    }

    
var selRange = document.selection.createRange();

    if(selRange.text.length == 0)
    
{
        selRange.setEndPoint(
"StartToStart",range);
        
var currentWidth = selRange.boundingWidth;
        
if(currentWidth < obj.initWidth)
        
{
            
if(event.keyCode < 33 || event.keyCode > 40
                
|| event.keyCode == 46 || event.keyCode == 8)
                event.returnValue 
= false;
        }

        
if(currentWidth == obj.initWidth)
        
{
            
if(event.keyCode == 8)
                event.returnValue 
= false;
        }

    }

    else
    
{
        selRange.moveEnd(
"character",-selRange.text.length);            //据我测试利用selRange.collapse(true)即可
        selRange.setEndPoint("StartToStart",range);
        
var currentWidth = selRange.boundingWidth;
        
if(currentWidth <= obj.initWidth-1)
        
{
       

            if(event.keyCode < 33 || event.keyCode > 40)
                event.returnValue 
= false;
        }

    }

}

</SCRIPT>
<BODY>
<INPUT type="text" value="Soft" class="notChangePartValue">
</BODY>
</HTML>


今天仔细研究了一下
setEndPoint的用法:给它的定义是t根据其它范围的结束点设置某范围的结束点
<SCRIPT language="javascript">
function aaa(){
var rng = document.getElementById("aa").createTextRange(); 
var rng1 = document.getElementById("aa").createTextRange(); 
var selRange = document.selection.createRange();
selRange.setEndPoint(
"StartToStart",rng);
selRange.setEndPoint(
"EndToEnd",rng);
alert(selRange.text.length)
selRange.select()
}

</SCRIPT>
<html>
<BODY>
<INPUT type="text" value="Softasdfasdfasfdaf" id="aa"  onclick="aaa()">
<form name="form1" method="post" action="">
  
<input type="button" name="Button" value="Button" onClick="aaa()">
</form>
</BODY>
</HTML>
上面是文本框的例子,
selRange.setEndPoint("StartToStart",rng);的意思就是我们光标点开始往后的文本,selRange.setEndPoint("EndToEnd",rng);是光标点往前的文本,我们可以通过rng.move("character",4)来设置光标点,测试这个例子就明白了,
<SCRIPT language="javascript">
function aaa(){
var rng = document.getElementById("aa").createTextRange(); 
var rng1 = document.getElementById("aa").createTextRange(); 
var selRange = document.selection.createRange();
rng.move(
"character",4)
//rng1.setEndPoint("StartToStart",rng);
selRange.setEndPoint("EndToEnd",rng);
alert(rng1.text)
}

</SCRIPT>
<html>
<BODY>
<INPUT type="text" value="Softasdfasdfasfdaf" id="aa"  onclick="aaa()">
<form name="form1" method="post" action="">
  
<input type="button" name="Button" value="Button" onClick="aaa()">
</form>
</BODY>
</HTML>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值