js获取光标位置


JavaScript #光标位置2012-07-14 21:12

例子一:

01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
03<head>
04<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
05<title>js获取光标位置</title>
06<script type="text/javascript">
08* 获取光标所在的字符位置
09* @param obj 要处理的控件, 支持文本域和输入框
10* @author hotleave
11*/
12function getPosition(obj){
13//alert(obj.tagName);
14var result = 0;
15if(obj.selectionStart){ //非IE浏览器
16   result = obj.selectionStart
17}else{ //IE
18   var rng;
19   if(obj.tagName == "TEXTAREA"){ //如果是文本域
20    rng = event.srcElement.createTextRange();
21    rng.moveToPoint(event.x,event.y);
22   }else{ //输入框
23    rng = document.selection.createRange();
24   }
25   rng.moveStart("character",-event.srcElement.value.length);
26   result = rng.text.length;
27}
28return result;
29}
30function getValue(obj){
31     var pos = getPosition(obj);
32//alert(pos);
33alert(obj.value.substr(0,pos)+" [这里是添加的内容] "+obj.value.substr(pos,obj.value.length));
34}
35</script>
36</head>
37<body>
38<input type="text" value="你好,Amethyst!" onmouseup="getValue(this)" style="display:block">
39<textarea rows="6" cols="60" onmouseup="getValue(this)">Amethyst, 你好.</textarea>
40</body>
41</html>
例子二:

01<html>
02<textarea   rows="7"   cols="49"   id="box"   onclick=tellPoint()>
03fasdfsdafsdafsafsadsdfsdfasfsafdsadfsadfsaf
04     </textarea>
05     <script   language="javascript">
06   function   tellPoint()
07   {
08      var   rng   =   event.srcElement.createTextRange();
09      rng.moveToPoint(event.x,event.y);
10    rng.moveStart("character",-event.srcElement.value.length);
11     pnum.value   =   rng.text.length;
12    }
13   </script> <p></p>                    
14   光标位置:<input   type="text"   value="0"   id="pnum"   size="8">    
15</html>


相关文章

粤ICP备11097351号-1