转自FR.richer的好文章：
各种浏览器下文本域中光标的定位关注用户体验，减少用户点击鼠标的次数，回复某人，点击回复之后，直接把光标定位到“回复XXX:”之后
测试页面如下：
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 <html> 04 <head> 05 <meta http-equiv="content-Type" content="text/html; charset=utf-8" /> 06 <title> JS光标处理 </title> 07 <meta name="Author" content="草依山@02web.com/hublog/"> 08 <meta name="Keywords" content=" js cursor location "> 09 <meta name="Description" content=" JS在文本框中的光标处理 "> 10 <script type="text/javascript"> 11 var $ = function( _id ) { return typeof _id === 'string' ? document.getElementById( _id ) : null }; 12 13 doReply = function() 14 { 15 var replyBox = $( 'reply' ); 16 17 replyBox.value += "回复XXX:"; 18 19 replyBox.focus(); 20 } 21 </script> 22 </head> 23 24 <body> 25 <a href="#" onclick="doReply()">我是小星哈哈</a> 26 <br/> 27 <textarea name="reply" id="reply" rows="6" cols="20"></textarea> 28 <br/> 29 <a href="http://www.google.com" title="搜索">小星星</a> 30 </body> 31 </html>
恩， 这是第一个页面，点击我是小星，文本域里会出现回复XXX字样，在火狐下光标会默认聚集到最后，在IE下如果你在点我是小星之前的光标是在文本域中的，那 么你很幸运，光标还是在最后，但是在你点我是小星之前光标不是在文本域，这时光标就会定位到最前面，看到现象了，那我们就知道怎么办了，在IE下每次点击 填文字之前先focus一下就行了，有了下面的改进的doReply函数
01 doReply = function() 02 { 03 04 var replyBox = $( 'reply' ); 05 06 replyBox.focus(); 07 08 replyBox.value += "回复XXX:"; 09 10 replyBox.focus(); 11 }
这个很好的解决了问题，可是如果某天要求光标定位到最开始呢，IE下好办，先让文本域失去焦点，再填值，再去focus就可以了，试验发现不行，就算通过 了可是火狐怎么办呢？并且上面的方法也始终是一个不是办法的办法，有没有科学一点的呢？为了避免将来更变态的定位需求，那就搞一下光标定位呗，定位在富文 本编辑器里很常用，不过那里跟这里又好像不太一样，一般的富文本编辑器，如tinyMce和ckEditor都是用iframe作为文本编辑的区域的，这 里只是一个文本域，废话不多说，研究一下。
IE支持的textRange可以方便的实现这个,关于IE的这个对象详细的可以看这里，火狐支持setSelectionRange()，详见这里，注意文档的后面一句，把两个值设为相同就可以把光标定位在指定的位置并且不会有选中出现，OK，建一个setCursorPos函数如下
01 var setCursorPos = function( el, pos ) 02 { 03 if( el.createTextRange ) 04 { 05 var rng = el.createTextRange(); //新建textRange对象 06 rng.moveStart( 'character', pos ); //更改rng对象的开始位置 07 rng.collapse( true ); //光标移动到范围结尾 08 rng.select();//选中 09 el.focus(); 10 }else if( el.setSelectionRange ) 11 { 12 el.focus(); //先聚集 13 el.setSelectionRange( pos , pos ); //设光标 14 } 15 }
恩，有了这些，我们就可以把页面重新弄一下了
相关推荐
巧克力的 Dash 文档 Mixin 这个简单的 Mixin 打开 Dash 文档浏览器并查找当前光标下的单词。 注意：键盘快捷键已更改为与其他文本编辑器中使用的更一致。 Ctrl-H将在 Dash 中进行上下文相关搜索，自动选择适当的文档...
跟随鼠标光标和切换实时上下文的快捷方式 单击并执行一个功能 如何使用 右键单击运行KnockoutJS的页面，然后按“ KO Context Hover”选项以激活面板。 面板顶部提供用于控制鼠标指针跟随/实时上下文数据的快捷方式。...
和>-更改块在手笔记： 推荐的浏览器：Chrome（Firefox的性能要差得多，不过Edge应该没问题） 可以调整渲染设置以获得更快的性能或更长的渲染距离（请参见下文） 有一个错误，如果您的相机靠近人脸，有时会冻结
您可以使用隐藏的功能（请参阅下文），也可以简单地将TheSchreibmaschine-Web页面保存在计算机上，然后稍后再次打开。 大量使用HTML5和CSS3功能（符合标准）。 特征 仅您的文字。 您当前的段落保持居中。 没有...
·工具提示：可查看光标所在变量的值和函数原型 ·按住CTRL键可导航到A，LINK，IMG标记和BACKGROUND属性 ·类视图：（View->Window->Class View）包含所有打开的文件中的代码元素（类、函数和变量）。您可以轻松地...
CTRL+Z、CTRL+SHIFT+Z 和 CTRL+Y 公开公共方法以挂钩您的按钮** 去做 ** 在推送时保存光标位置并在更新时恢复它也挂钩上下文菜单的撤消功能返工防止存储单个字符修改的机制浏览器支持支持和现代浏览器应该不错。...
上下文感知代码突出显示 桌面式文件管理器 文档选项卡指示当前文档和所做的更改 代码折叠 基于浏览器，可以在线或离线运行 语言支援 HTML，CSS，LESS，JavaScript，CoffeeScript，PHP，Ruby，Python等！ 易于支持60...
这本书就是一本帮助你最大限度地利用Tcl/Tk并回避一些我所经历过的令人头痛的问题的实用编程指南。 我接触Tcl语言大概已经有10年的时间了，而本书的第一版也已经出版5年了。在过去的几年中，我一直在John ...
9.9.7 带有上下文菜单的表格 186 9.9.8 可编辑的表格（TableEditor） 187 9.9.9 用键盘控制表格（TableCursor） 189 9.9.10 带有进度条的表格 191 9.9.11 表格小结 192 9.10 树（Tree） 192 9.10.1 不同...
Vico还具有集成的SFTP（用于处理远程文件），分割视图（可让您并排编辑文件）和文件浏览器（用于快速项目导航）。 使用模糊查找在文件之间快速导航，或直接在ex命令行中使用制表符补全打开文件。 使用符号列表可以...
Codelobster IDE 为所有支持的编程语言提供上下文帮助。因此，我们可以通过按 F1 键快速获取任何 HTML 标签，CSS 属性，PHP 或 JavaScript 函数的描述等等。 程序员开发代码编辑器 CodeLobster IDE Pro 中文版...
1.26 文本域中光标的定位 1.27 实现可折叠效果 1.28 文本框内容自动缩进 1.29 禁止页面滚动的方法 1.30 页面加载后消息框居中显示 1.31 创建页面固定浮动栏的方法 第2章 jQuery操作DOM元素 2.1 如何验证某个元素...
5个目标文件，演示Address EJB的实现，创建一个EJB测试客户端，得到名字上下文，查询jndi名，通过强制转型得到Home接口，getInitialContext()函数返回一个经过初始化的上下文，用client的getHome()函数调用Home接口...
5个目标文件，演示Address EJB的实现，创建一个EJB测试客户端，得到名字上下文，查询jndi名，通过强制转型得到Home接口，getInitialContext()函数返回一个经过初始化的上下文，用client的getHome()函数调用Home接口...
5个目标文件，演示Address EJB的实现，创建一个EJB测试客户端，得到名字上下文，查询jndi名，通过强制转型得到Home接口，getInitialContext()函数返回一个经过初始化的上下文，用client的getHome()函数调用Home接口...
5个目标文件，演示Address EJB的实现，创建一个EJB测试客户端，得到名字上下文，查询jndi名，通过强制转型得到Home接口，getInitialContext()函数返回一个经过初始化的上下文，用client的getHome()函数调用Home接口...
5个目标文件，演示Address EJB的实现，创建一个EJB测试客户端，得到名字上下文，查询jndi名，通过强制转型得到Home接口，getInitialContext()函数返回一个经过初始化的上下文，用client的getHome()函数调用Home接口...
5个目标文件，演示Address EJB的实现，创建一个EJB测试客户端，得到名字上下文，查询jndi名，通过强制转型得到Home接口，getInitialContext()函数返回一个经过初始化的上下文，用client的getHome()函数调用Home接口...