从光标焦点位置产生的联想

       今天工作中遇到了光标的位置问题。

       我们在上一些SNS网站时，如果我们给某人留言，那么点击‘回复’，光标的位置会自动移动到‘回复×××：’的后面。这是一个很人性化的设计，可是却难道了我，因为在这方面我了解得很少，所以今天收集了一些详细的资料，整理了一下。如下：

 

        

15. <script language="javascript">
16. function test()
17. {
18. var rng=document.body.createTextRange();
19. alert(rng.text)
20. }
21. function test1()
22. {
23. var rng=document.body.createTextRange();
24. alert(rng.htmlText)
25. }
26. </script>
27. <input type="button" onclick="test()" value="text">
28. <input type="button" onclick="test1()" value="htmlText">
31. 获取指定文本框中的选中的文字：只响应第一个文本框
33. <input id="inp1" type="text" value="1234567890">
34. <input id="inp2" type="text" value="9876543210">
35. <input type="button" onclick="test()" value="确定">
36. <script language="javascript">
37. function test()
38. {
39. var o=document.getElementById("inp1")
40. var r = document.selection.createRange();
41. if(o.createTextRange().inRange(r))
42. alert(r.text);
43. }
44. </script>
47. 页面文本倒序查找
49. abababababababa
50. <input value="倒序查找a" onclick=myfindtext("a") type="button">
51. <script language ='javascript'>
52. var rng = document.body.createTextRange();
53. function myfindtext(text)
54. {
55. rng.collapse(false);
56. if(rng.findText(text,-1,1))
57. {
58. rng.select();
59. rng.collapse(true);
60. }else
61. {alert("end");}
62. }
63. </script>
66. 聚焦控件后把光标放到最后
68. <script language="javascript">
69. function setFocus()
70. {
71. var obj = event.srcElement;
72. var txt =obj.createTextRange();
73. txt.moveStart('character',obj.value.length);
74. txt.collapse(true);
75. txt.select();
76. }
77. </script>
78. <input type="text" value="http://toto369.net" onfocus="setFocus()">
81. 得到文本框内光标位置
83. <script language="javascript">
84. function getPos(obj){
85. obj.focus();
86. var s=document.selection.createRange();
87. s.setEndPoint("StartToStart",obj.createTextRange())
88. alert(s.text.length);
89. }
90. </script>
91. <input type="text" id="txt1" value="1234567890">
92. <input type="button" value="得到光标位置" onclick=getPos(txt1)>
95. 控制input框内光标位置
97. <script language="javascript">
98. function setPos(num)
99. {
100. text1.focus();
101. var e =document.getElementById("text5");
102. var r =e.createTextRange();
103. r.moveStart('character',num);
104. r.collapse(true);
105. r.select();
106. }
107. </script>
108. <input type="text" id="text5" value="1234567890">
109. <select onchange="setPos(this.selectedIndex)">
110. <option value="0">0</option>
111. <option value="1">1</option>
112. <option value="2">2</option>
113. <option value="3">3</option>
114. <option value="4">4</option>
115. <option value="5">5</option>
116. <option value="6">6</option>
117. <option value="7">7</option>
118. </select>
121. 选中文本框中的一段文字
123. <script language=javascript>
124. function sel(obj,num)
125. {
126. var rng=obj.createTextRange()
127. var sel = rng.duplicate();
128. sel.moveStart("character", num);
129. sel.setEndPoint("EndToStart", rng);
130. sel.select();
131. }
132. </script>
133. <input type="text" id="text1" value="1234567890">
134. <select onchange="sel(text1,this.value)">
135. <option value="0">0</option>
136. <option value="1">1</option>
137. <option value="2">2</option>
138. <option value="3">3</option>
139. <option value="4">4</option>
140. <option value="5">5</option>
141. <option value="6">6</option>
142. <option value="7">7</option>
143. </select>
146. 控制文本框内光标的移动
148. <input type="button" value="<" onclick=go(-1)>
149. <input id="demo" value="这里是文字">
150. <input type="button" value=">" onclick=go(1)>
151. <script language="javascript">
152. function go(n){
153. demo.focus();
154. with(document.selection.createRange())
155. {
156. moveStart("character",n);
157. collapse();
158. select();
159. }
160. }
161. </script>
162.  
163. 今天又查了一些资料，在firefox下要移动光标的位置更简单，它调
165. 用了document对象的setSelectionRange（first，second）方法，顾名
167. 思义，first是选中文本的起点，second选中文本的终点（是一个长
169. 度值）。如果两个参数是一样的，就把光标移动到参数指定的位
171. 置，别忘了末了要调用focus（）显示焦点。

              不幸的是在firefox下如果调用这些函数前有一个屏幕的定位（比如说<a href="#input" οnclick="show()"></a>），再去调用show（）来完成我们的逻辑代码。无论是选中文本还是获取焦点都会一闪而过，怎样完善它呢?让我再想想。

                解决方法就是<a href="#" οnclick="show();return false"></a>。不要再锚中定位，在show（）中定位：window.location = "#input",这样就可以避免了firefox下的问题！哎，真不知道浏览器怎么实现这个机制的，我认为firefox 在实现window.location = "#input"后把焦点归还给了浏览器而不是某一个输入框，所以要先定位后实现逻辑。