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">
02<html xmlns="http://www.w3.org/1999/xhtml">
03<head>
04<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
05<title>js获取光标位置</title>
06<script type="text/javascript">
07/** http://yige.org
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>

JS 基础

JS 对象

JS 高级

JS 实例

JS 参考手册

js获取光标位置

相关文章