软件开发培训班 >> 编程开发 >> JavaScript

光标定位等TextRange的操作的范例代码

<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="7"> 
点击 TextArea 实现光标定位         
<p>         
<textarea rows="7" cols="49" id="box" onclick=tellPoint()>我怕来
不迭我要抱着你，直到觉得你的绉纹有了岁月的痕迹，直到视线变得含糊直到不能呼吸 
为了你我情愿 
动也不能动也要看着你，直到觉得你的发线有了白雪的痕迹，直到
确定你是真的直到失去
力量让我们
如影随行 
假如全世界我也

可以抛弃，至少还有你值得我去珍惜而你在这里便是生命的
奇观 
或许全世界我也

可以
淡忘，便是不情愿失去你的
信息你掌心的痣我总记得在哪里 
我们好不方便我们身
不禁已，我怕
工夫太快不够将你看
细心，我怕
工夫太慢日夜

担心失去你
巴不得一夜中间白头永不
拆散 
</textarea>        
<script language="javascript"> 
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)       
 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="text" value="0" id="pnum" size="8"> <input type="button" onclick="movePoint()" value="移动光标到指定位置">      
<p></P><div class="tj_content hidden-xs"><table width=600 border=0 cellspacing=0 cellpadding=2 align=center class=title14><tr align=center><td><a href="http://www.zhujiangroad.com/web/news/2023/7m87839.html"  target=_blank > 美团“卷不动”香港外卖市场 </a></td><td><a href="http://www.zhujiangroad.com/software/news/2019/11m80946.html"  target=_blank > 微信推送广告太烦人？一键教你快速关闭，朋友圈瞬间清净 </a></td></tr> <tr align=center><td><a href="http://www.zhujiangroad.com/net/html/77166.html"  target=_blank > 是SEO技术已死，还是你不懂SEO？ </a></td><td><a href="http://www.zhujiangroad.com/software/news/2020/11m82285.html"  target=_blank > 瑞星：中国曾最牛逼的互联网公司，10年后却为上新三板苦苦挣扎 </a></td></tr></table></div>           
挑选指定
规模：<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>

技术文章快速查找

清除div下面的所有标签的方法

js中的时间转换—毫秒转换成日期时间的示例代码

CheckBox 如何实现全选？

JQuery拖拽元素改变大小尺寸实现代码

jQuery客户端分页实例代码

jquery自动完成插件(autocomplete)应用之PHP版

JavaScript经典语句及其基本应用

javascript 函数调用的对象和方法

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建