js 操作文本框中光标位置

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 2 <html xmlns="http://www.w3.org/1999/xhtml"> 
 3 <head> 
 4 <title>JavaScript 获取/设置光标位置,兼容Input&&TextArea。</title> 
 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
 6 <style> 
 7 body { margin: 32px; font-family: Verdana, sans-serif; font-size: 13px; } 
 8 .title { font-size: 18px; font-weight: bolder;margin:40px 0; } 
 9 .input { width: 50%; font-family: Verdana, sans-serif; font-size: 13px; text-indent: 2px; } 
10 </style> 
11 <script> 
12 //获取光标位置 
13 //单行文本框 
14 function getPositionForInput(ctrl){ 
15 var CaretPos = 0; 
16 if (document.selection) { // IE Support 
17 ctrl.focus(); 
18 var Sel = document.selection.createRange(); 
19 Sel.moveStart('character', -ctrl.value.length); 
20 CaretPos = Sel.text.length; 
21 }else if(ctrl.selectionStart || ctrl.selectionStart == '0'){// Firefox support 
22 CaretPos = ctrl.selectionStart; 
23 } 
24 return (CaretPos); 
25 } 
26 //多行文本框 
27 function getPositionForTextArea(ctrl) { 
28 var CaretPos = 0; 
29 if(document.selection) {// IE Support 
30 ctrl.focus(); 
31 var Sel = document.selection.createRange(); 
32 var Sel2 = Sel.duplicate(); 
33 Sel2.moveToElementText(ctrl); 
34 var CaretPos = -1; 
35 while(Sel2.inRange(Sel)){ 
36 Sel2.moveStart('character'); 
37 CaretPos++; 
38 } 
39 }else if(ctrl.selectionStart || ctrl.selectionStart == '0'){// Firefox support 
40 CaretPos = ctrl.selectionStart; 
41 } 
42 return (CaretPos); 
43 } 
44 //设置光标位置函数 
45 function setCursorPosition(ctrl, pos){ 
46 if(ctrl.setSelectionRange){ 
47 ctrl.focus(); 
48 ctrl.setSelectionRange(pos,pos); 
49 } 
50 else if (ctrl.createTextRange) { 
51 var range = ctrl.createTextRange(); 
52 range.collapse(true); 
53 range.moveEnd('character', pos); 
54 range.moveStart('character', pos); 
55 range.select(); 
56 } 
57 } 
58 //test 
59 function process( id,targetId ){ 
60 var no = document.getElementById(id).value; 
61 setCursorPosition(document.getElementById(targetId),no); 
62 } 
63 </script> 
64 </head> 
65 <body> 
66 <div class="title">JavaScript 获取/设置光标位置,兼容Input&&TextArea：</div> 
67 <div class="title">单行文本框</div> 
68 <p><input class="input" id="textbox" name="textbox" value="Hi,www.fengfly.com!!!" /></p>
69 
70 <input type="button" onclick="alert( getPositionForInput( document.getElementById('textbox') ) )" value="Get Position"> 
71 输入位置: <input type="text" id="no1" size="1" /><input type="button" onclick="process('no1','textbox');" value="Set Position">
72 
73 <div class="title">多行文本框</div> 
74 <textarea id="zhangdanNum" name="zhangdanNum" style="height:66px;width:246px;overflow:hidden">Hi,CssRain!!!</textarea> 
75 <input type="button" onclick="alert( getPositionForTextArea( document.getElementById('zhangdanNum') ) )" value="Get Position"> 
76 输入位置: <input type="text" id="no2" size="1" /><input type="button" onclick="process('no2','zhangdanNum');" value="Set Position"> 
77 </body> 
78 </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScript 获取/设置光标位置,兼容Input&&TextArea。</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> body { margin: 32px; font-family: Verdana, sans-serif; font-size: 13px; } .title { font-size: 18px; font-weight: bolder;margin:40px 0; } .input { width: 50%; font-family: Verdana, sans-serif; font-size: 13px; text-indent: 2px; } </style> <script> //获取光标位置 //单行文本框 function getPositionForInput(ctrl){ var CaretPos = 0; if (document.selection) { // IE Support ctrl.focus(); var Sel = document.selection.createRange(); Sel.moveStart('character', -ctrl.value.length); CaretPos = Sel.text.length; }else if(ctrl.selectionStart || ctrl.selectionStart == '0'){// Firefox support CaretPos = ctrl.selectionStart; } return (CaretPos); } //多行文本框 function getPositionForTextArea(ctrl) { var CaretPos = 0; if(document.selection) {// IE Support ctrl.focus(); var Sel = document.selection.createRange(); var Sel2 = Sel.duplicate(); Sel2.moveToElementText(ctrl); var CaretPos = -1; while(Sel2.inRange(Sel)){ Sel2.moveStart('character'); CaretPos++; } }else if(ctrl.selectionStart || ctrl.selectionStart == '0'){// Firefox support CaretPos = ctrl.selectionStart; } return (CaretPos); } //设置光标位置函数 function setCursorPosition(ctrl, pos){ if(ctrl.setSelectionRange){ ctrl.focus(); ctrl.setSelectionRange(pos,pos); } else if (ctrl.createTextRange) { var range = ctrl.createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } } //test function process( id,targetId ){ var no = document.getElementById(id).value; setCursorPosition(document.getElementById(targetId),no); } </script> </head> <body> <div class="title">JavaScript 获取/设置光标位置,兼容Input&&TextArea：</div> <div class="title">单行文本框</div> <p><input class="input" id="textbox" name="textbox" value="Hi,www.fengfly.com!!!" /></p> <input type="button" onclick="alert( getPositionForInput( document.getElementById('textbox') ) )" value="Get Position"> 输入位置: <input type="text" id="no1" size="1" /><input type="button" onclick="process('no1','textbox');" value="Set Position"> <div class="title">多行文本框</div> <textarea id="zhangdanNum" name="zhangdanNum" style="height:66px;width:246px;overflow:hidden">Hi,CssRain!!!</textarea> <input type="button" onclick="alert( getPositionForTextArea( document.getElementById('zhangdanNum') ) )" value="Get Position"> 输入位置: <input type="text" id="no2" size="1" /><input type="button" onclick="process('no2','zhangdanNum');" value="Set Position"> </body> </html>

运行代码