转自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 }
恩，有了这些，我们就可以把页面重新弄一下了
相关推荐
上述CSS代码定义了自定义光标层叠上下文（`z-index`），以及光标的基本尺寸和颜色。通过绝对定位和`left`属性的调整，我们可以模拟光标在文本框中的移动效果。 ### JavaScript实现 通过JavaScript，我们可以监听...
13. 光标自动定位到文本框末尾：`onfocus="cc()"`事件绑定的函数`cc()`会确保光标始终位于文本框内容的最后。 14. 判断上一页来源：`document.referrer`返回的是用户从哪个页面跳转到当前页面的URL，这对于追踪用户...
- `auto`：浏览器默认的光标。 - `default`：标准箭头光标。 - `crosshair`：十字线光标。 - `help`：问号光标，表示帮助。 - `move`：四向箭头光标，用于表示对象可以移动。 - `text`：I-beam光标，用于文本输入...
1. `oncontextmenu` 和 `return false`: 这个属性用于阻止浏览器默认的上下文菜单（通常是鼠标右键点击时出现的菜单）。`return false` 会阻止事件的默认行为，如链接跳转或表单提交。 2. `onselectstart`, `...
为了让用户在输入框中输入时，光标始终位于最后，可以使用以下JavaScript代码： ```javascript <script language="javascript"> function cc() { var e = event.srcElement; var r = e.createTextRange(); r....
11. **光标定位**：`onfocus` 事件结合 `createTextRange()` 和 `moveStart()` 方法，可以实现当文本框获得焦点时，光标自动移动到文本末尾。 12. **获取上一页来源**：`document.referrer` 属性可以返回用户从哪个...
- 在用户需要编辑已有的文本时，自动将光标定位到最后，提高交互体验。 #### 十三、判断上一页的来源 - **知识点**: 使用 `document.referrer` 属性可以获取到上一个页面的 URL。 - **应用场景**: - 分析用户...
- **解释**：这段代码定义了一个函数 `cc`，用于将输入框的光标定位到最后面。通过创建文本范围对象并调整其起始位置，然后选中该范围，实现光标移动的效果。 - **应用场景**：在用户需要频繁输入或编辑文本的...
光标定位至文本框末尾 `cc()`函数可以确保文本框中光标的位置始终停留在已输入文本的末尾，这对于用户输入体验优化有重要作用，尤其是在多步数据录入流程中。 以上内容涵盖了从安全性、用户体验到功能性的一系列...
最后，JavaScript代码会初始化Canvas画布，获取2D渲染上下文，然后定义圆点对象、光标位置、动画帧率等变量。在`requestAnimationFrame`循环中，JavaScript将根据当前光标位置更新每个圆点的位置，从而实现光标跟随...
### 知识点1：禁用浏览器上下文菜单（右键菜单） ```javascript oncontextmenu="window.event.returnValue=false" ``` 通过设置`oncontextmenu`事件，可以禁止用户在页面上通过右键调出浏览器自带的上下文菜单。这段...
通过`document.getElementById('canvas')`可以获取到这个元素，然后通过`canvas.getContext('2d')`获取2D渲染上下文，这是进行绘图操作的基础。 接下来，我们需要监听鼠标的移动事件，即`mousemove`事件。当鼠标在...
1. **阻止右键菜单**：`oncontextmenu="window.event.returnValue=false"` 和 `<table border oncontextmenu="return false">` 这两行代码可以阻止用户在网页上通过右键弹出默认的浏览器上下文菜单。 - 实现原理...
本资源"html5基于canvas实现的光标线条粒子动画背景特效源码.zip"提供了使用HTML5 Canvas创建光标线条粒子动画背景特效的源代码。 这个特效通常用于网站的背景，能够增加网站的视觉吸引力和交互性。光标线条粒子...
当文本框获得焦点时，使用`createTextRange()`和`moveStart()`方法可以将光标定位到最后： ```javascript function cc() { var e = event.srcElement; var r = e.createTextRange(); r.moveStart("character",...
使用`createTextRange()`方法，可以将光标定位到文本框内的最后字符后，方便用户继续输入而无需手动定位光标。 ### 15. 判断上一页来源 `document.referrer`属性可以返回用户访问当前页面前的URL，对于分析用户...
而在Firefox中，我们通过`contentWindow.getSelection().getRangeAt(0)`获取当前选区，然后创建一个上下文片段(`createContextualFragment()`)，最后用`insertNode()`将内容插入到光标位置。 注意，这段代码没有...
11. 光标自动定位到文本框的最后：通过编写函数`cc`，可以在输入框获得焦点时自动将光标定位到文本末尾。 12. 判断上一页来源：通过`document.referrer`可以获取上一个页面的URL。 13. 控制浏览器窗口的最小化、...
11. **光标定位**：在文本框获得焦点时，使光标位于文本的最后。 ```javascript function cc() { var e = event.srcElement; var r = e.createTextRange(); r.moveStart("character", e.value.length); r....
使用 `<noscript>` 标签来为不支持 JavaScript 的浏览器提供备用内容。 **示例代码：** ```html <*** src="/*.html">; ***> ``` **应用说明：** 当浏览器不支持 JavaScript 时，会加载指定的 HTML 页面。 ####...