posts - 1,  comments - 25,  trackbacks - 0
<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>光标位置</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="17">   
  点击 TextArea 实现光标定位   
  <p>   
  <input type="Button" value="ff" onclick="fo()"/>
  <input type="Button" value="UPLINE" onclick="upLine()"/>
  <input type="Button" value="DOWNLINE" onclick="downLine()"/>
  <textarea rows="17" cols="49" id="box" onclick="tellPoint()" >
HIGHHEEL
sfsfsfs
s1123
432434
asf
fsa
sf
3232</textarea> 
  <script type="text/javascript">
  function getPos(textarea) {
  var rangeData = {text: "", start: 0, end: 0 };
 
  if (textarea.setSelectionRange) { // W3C 
   textarea.focus();
   rangeData.start= textarea.selectionStart;
   rangeData.end = textarea.selectionEnd;
   rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end): "";
  } else if (document.selection) { // IE
   textarea.focus();
   var i,
    oS = document.selection.createRange(),
    // Don't: oR = textarea.createTextRange()
    oR = document.body.createTextRange();
   oR.moveToElementText(textarea);
   
   rangeData.text = oS.text;
   rangeData.bookmark = oS.getBookmark();
   
   // object.moveStart(sUnit [, iCount]) 
   // Return Value: Integer that returns the number of units moved.
   for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i ++) {
    // Why? You can alert(textarea.value.length)
    if (textarea.value.charAt(i) == '/r' ) {
     i ++;
    }
   }
   rangeData.start = i;
   rangeData.end = rangeData.text.length + rangeData.start;
  }
  
  return rangeData;
  }
  
  function fo(){
 var text = new String(document.getElementById("box").value);
 var currentCurrosr = document.getElementById("pnum").value;
 alert(text.substring(currentCurrosr-1, currentCurrosr));
 pos = getPos(document.getElementById("box"));
 alert(pos.start);
//       var end = text.indexOf("\r\n", document.getElementById("pnum").value);
//      if(end == -1){
//     alert("END");
//      }
//     var start = text.lastIndexOf("\r\n", currentCurrosr);
//     if(start == -1){alert("START");}
//     var currentLine = getLine(currentCurrosr);
//     alert("CUL"+currentLine+"L"+currentLine.length);
//     var nextLine = getLine(end + 1);
//     alert("NEXT"+nextLine+"L"+nextLine.length);
//     var preLine = getLine(start - 1);
//     alert("PRE"+ preLine+"L"+preLine.length);
  }
  
  function upLine(){
 var text = new String(document.getElementById("box").value);
 var currentCurrosr = document.getElementById("h1").value;
      var end = text.indexOf("\r\n",currentCurrosr);
      var start = null;
      if(currentCurrosr == end){
start =text.lastIndexOf("\r\n", currentCurrosr-1);  
      }else{
      start = text.lastIndexOf("\r\n", currentCurrosr);
      }
      if(start == -1){alert("Already the toppest!");
      return;
      }
      var preLine = getLine(start-1);
      var currentLine = getLine(currentCurrosr);
      var preLineStart = text.lastIndexOf("\r\n", start-1);
      var sq = null;
      var endPart = text.substring(end,text.length);
    alert(text.length);
      if(preLineStart == -1){
    sq = new String(currentLine).substring(2, currentLine.length).concat("\r\n").concat(preLine).concat(endPart);
    alert(sq);
    alert(sq.length);
      }else{
     alert(preLineStart);
     sq = text.substring(0, preLineStart).concat(currentLine).concat(preLine).concat(endPart);
          alert(sq);
          alert(sq.length);
      }
      document.getElementById("box").value=sq;
  }
  
  function downLine(){
 
  }
  
   
  
  
  function getLine(currsor){
var text = new String(document.getElementById("box").value);
var end = text.indexOf("\r\n", currsor);
if(end == -1){
return text.substring(text.lastIndexOf("\r\n", text.length), text.length);
}
var tmp = text.substring(0, end);
var start = tmp.lastIndexOf("\r\n", end);
if(start == -1){
}
// alert(tmp);
// alert(start);
// alert(text.substring(start+4, end).length);
// alert(text.substring(start+4, end));
return text.substring(start, end);
}
  function movePoint()   
  {   
  var pn=parseInt(pnum.value);   
  if(isNaN(pn))   
  return;   
  var rng=box.createTextRange();   
  rng.moveStart("character",pn);   
  rng.collapse(true);   
  rng.select();   
  returnCase(rng)   
  }   
  function tellPoint()   
  { 
  var rng=event.srcElement.createTextRange();   
  rng.moveToPoint(event.x,event.y);   
  rng.moveStart("character",-event.srcElement.value.length)   
  h1.value=rng.text.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)   
  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="hidden" id="h1">   
  光标位置:<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:&nbsp;<span id="bh"></span></td>   
  </tr>   
  <tr>   
  <td width="217">boundingWidth:&nbsp;<span id="bw"></span></td>   
  </tr>   
  <tr>   
  <td width="217">boundingTop:&nbsp;<span id="bt"></span></td>   
  </tr>   
  <tr>   
  <td width="217">boundingLeft:&nbsp;<span id="bl"></span></td>   
  </tr>   
  <tr>   
  <td width="217">offsetLeft:&nbsp;<span id="ol"></span> </td>   
  </tr>   
  <tr>   
  <td width="217">offsetTop:&nbsp;<span id="ot"></span> </td>   
  </tr>   
  <tr>   
  <td width="217">text:&nbsp;<span style="position: absolute; z-index: 10" id="t" ></span> </td>   
  </tr>   
  </table>   
  </body>   
  </html>
posted on 2011-12-01 23:03 Daniel 阅读(276) 评论(0)  编辑  收藏 所属分类: JS

只有注册用户登录后才能发表评论。


网站导航:
 
<2022年8月>
31123456
78910111213
14151617181920
21222324252627
28293031123
45678910

常用链接

留言簿(3)

随笔档案

文章分类

文章档案

相册

搜索

  •  

最新评论