js源码--createTextRange

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