1157人阅读
javascript（77）
转载自：http://www.planabc.net//get_textarea_cursor_position/
在任何编辑器中，获取光标位置都是非常重要的，很多人可能认为较难，其实只要处理好浏览器的兼容，还是比较容易实现的。
下面我们一起来看看如何获取到 Textarea 元素中的光标位置（
首先，我们用 rangeData 对象作为数据存储，并获得焦点：
var rangeData = {start: 0, end: 0, text: && };
textarea.focus();
对于非 IE 浏览器获取选区的起始和末尾位置其实非常容易：
rangeData.start= el.selectionS
rangeData.end = el.selectionE
通过截取我们可以得到光标的选区内容：
rangeData.text = (rangeData.start != rangeData.end) ? el.value.substring(rangeData.start, rangeData.end): &&;
而对于 IE 浏览器处理起来就比较麻烦了，但我们依旧可以获取到选区：
oS = document.selection.createRange();
同时还可获取 Textarea 元素的选区：
// 为了使 oR 与 oS 在同一等级上比较，请勿使用：oR = textarea.createTextRange()
oR = document.body.createTextRange();
oR.moveToElementText(textarea);
如果光标在 Textarea 元素内，很自然 oS.text 就是我们需要的选区内容：
rangeData.text = oS.
并且我们可以通过 oS.getBookmark() 方法获取到选区的位置数据，该位置数据可以通过 moveToBookmark() 方法设置回去。
: Retrieves a bookmark (opaque string) that can be used with moveToBookmark to return to the same range.
: Moves to a bookmark.
我们用 rangeData.bookmark 来记录该位置数据：
rangeData.bookmark = oS.getBookmark();
下面是最重要的步骤：我们比较 oR 与 oS 的选区起始位置（使用 object
compareEndPoints
方法比较），如果 oR 的起始位置在 oS 之前，我们向前移动 oS 的起始位置1个字符（使用 object
方法移动），一直当 oS 的起始位置在 oR 之前停止，移动的位置，则是选区的起始位置。
: Compares an end point of a TextRange object with an end point of another range.
: Changes the start position of the range.
for (i = 0; oR.compareEndPoints('StartToStart', oS) & 0 && oS.moveStart(&character&, -1) !== 0; i ++) {}
rangeData.start =
但由于在 IE 中，Textarea 元素中的所有换行符都占 1
个字符，可以通过 alert
查看，故要对上面的代码做部分处理：
for (i = 0; oR.compareEndPoints('StartToStart', oS) & 0 && oS.moveStart(&character&, -1) !== 0; i ++) {
// Why? You can alert(textarea.value.length)
if (textarea.value.charAt(i) == '/n') {
rangeData.start =
既然得到了选区的起始位置和选区字符串的字符，很自然我们可以计算得到选区的末尾位置：
rangeData.end = rangeData.text.length + rangeData.
获取 Textarea 的光标位置的 getCursorPosition 函数方法整理如下：
* getCursorPosition Method
* Created by Blank Zheng on .
* Copyright (c) 2010 PlanABC.net. All rights reserved.
* The copyrights embodied in the content of this file are licensed under the BSD (revised) open source license.
function getCursorPosition(textarea) {
var rangeData = {text: &&, start: 0, end: 0 };
textarea.focus();
if (textarea.setSelectionRange) { // W3C
rangeData.start= textarea.selectionS
rangeData.end = textarea.selectionE
rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end): &&;
} else if (document.selection) { // IE
oS = document.selection.createRange(),
// Don't: oR = textarea.createTextRange()
oR = document.body.createTextRange();
oR.moveToElementText(textarea);
rangeData.text = oS.
rangeData.bookmark = oS.getBookmark();
// object.moveStart(sUnit [, iCount])
// Return Value: Integer that returns the number of units moved.
for (i = 0; oR.compareEndPoints('StartToStart', oS) & 0 && oS.moveStart(&character&, -1) !== 0; i ++) {
// Why? You can alert(textarea.value.length)
if (textarea.value.charAt(i) == '/n') {
rangeData.start =
rangeData.end = rangeData.text.length + rangeData.
return rangeD
得到 Textarea 元素光标位置，当Textarea 中的光标丢失了，再设置回来就简单多了：
* setCursorPosition Method
* Created by Blank Zheng on .
* Copyright (c) 2010 PlanABC.net. All rights reserved.
* The copyrights embodied in the content of this file are licensed under the BSD (revised) open source license.
function setCursorPosition(textarea, rangeData) {
if(!rangeData) {
alert(&You must get cursor position first.&)
if (textarea.setSelectionRange) { // W3C
textarea.focus();
textarea.setSelectionRange(rangeData.start, rangeData.end);
} else if (textarea.createTextRange) { // IE
var oR = textarea.createTextRange();
// Fixbug :
// In IE, if cursor position at the end of textarea, the setCursorPosition function don't work
if(textarea.value.length === rangeData.start) {
oR.collapse(false)
oR.select();
oR.moveToBookmark(rangeData.bookmark);
oR.select();
测试地址：
扩展阅读：
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：369567次
积分：4680
积分：4680
排名：第5584名
转载：492篇
评论：17条
(2)(7)(7)(3)(5)(3)(2)(2)(2)(1)(1)(2)(6)(1)(1)(2)(1)(1)(9)(3)(6)(1)(4)(6)(4)(1)(2)(2)(4)(3)(3)(4)(5)(1)(11)(3)(1)(3)(6)(3)(5)(1)(6)(2)(3)(2)(23)(4)(3)(3)(4)(15)(11)(9)(8)(17)(13)(8)(15)(6)(7)(4)(2)(9)(5)(3)(13)(5)(5)(12)(9)(5)(3)(4)(1)(3)(6)(3)(5)(7)(11)(6)(19)(14)(10)(1)(7)(2)(7)(20)您所在的位置： &
技术分享 Javascript如何获取textarea中光标位置
技术分享 Javascript如何获取textarea中光标位置
你对使用Javascript获取textarea中的光标位置是否了解，这里和大家分享一下，Javascript一向以他的灵活随意而著称，这也使得它的功能可以非常的强大。
这里和大家分享一下如何用Javascript获取textarea中的光标位置，相信本文介绍一定会让你有所收获的。
用Javascript获取textarea中的光标位置
Javascript一向以他的灵活随意而著称，这也使得它的功能可以非常的强大，而由于没有比较好的调试工具，又使得它使用起来困难重重，尤其使对于一些初学者，更是感觉到无从下手。今天探讨的问题是用javascript获取textarea中光标的位置。对于写javascript写网页编辑器的人来说，获取textarea中的光标位置是一个非常重要的问题，而往往很多人在这个地方不知所措，找不到好的办法。昨天我在网上找到了一段javascript代码，本来不想把原版放在这里的，就是因为太精彩了，怕我给改坏了，所以还是原版放在这里吧。
varstart=0; &varend=0; &functionadd(){ &vartextBox=document.getElementById(&ta&); &varpre=textBox.value.substr(0,start); &varpost=textBox.value.substr(end); &textBox.value=pre+document.getElementById(&inputtext&).value+ &} &functionsavePos(textBox){ &//如果是Firefox(1.5)的话，方法很简单 &if(typeof(textBox.selectionStart)==&number&){ &start=textBox.selectionS &end=textBox.selectionE &} &//下面是IE(6.0)的方法，麻烦得很，还要计算上'\n' &elseif(document.selection){ &varrange=document.selection.createRange(); &if(range.parentElement().id==textBox.id){ &//createaselectionofthewholetextarea &varrange_all=document.body.createTextRange(); &range_all.moveToElementText(textBox); &//两个range，一个是已经选择的text(range)， &一个是整个textarea(range_all) &//pareEndPoints()比较两个端点， &如果range_all比range更往左(furthertotheleft)， &则//返回小于0的值，则range_all往右移一点，直到两个range的start相同。 &//calculateselectionstartpointbymovingbeginningofrange_alltobeginningofrange &for(start=0;pareEndPoints(&StartToStart&,range);start++)range_all.moveStart('character',1); &//getnumberoflinebreaksfromtextareastarttoselectionstartandaddthemtostart &//计算一下\n &for(vari=0;i=i++){ &if(textBox.value.charAt(i)=='\n') &start++; &} &//createaselectionofthewholetextarea &varrange_all=document.body.createTextRange(); &range_all.moveToElementText(textBox); &//calculateselectionendpointbymovingbeginningofrange_alltoendofrange &for(end=0;pareEndPoints('StartToEnd',range);end++) &range_all.moveStart('character',1); &//getnumberoflinebreaksfromtextareastarttoselectionendandaddthemtoend &for(vari=0;i=i++){ &if(textBox.value.charAt(i)=='\n') &end++; &} &} &} &document.getElementById(&start&).value=start; &document.getElementById(&end&).value=end; &} &&
下面是在页面中调用js代码的方法：
formaction=&a.cgi&&tableborder=&1&cellspacing=&0&cellpadding=&0&&&start:inputtype=&text&id=&start&size=&3&&end:inputtype=&text&id=&end&size=&3&&&&tdcolspan=&2&&textareaid=&ta&onKeydown=&savePos(this)& &onKeyup=&savePos(this)&&onmousedown=&savePos(this)&&onmouseup=&savePos(this)&&onfocus=&savePos(this)&&rows=&14&cols=&50&&&&&inputtype=&text&id=&inputtext&&inputtype=&button&onClick=&add()&value=&AddText&&&&&
【编辑推荐】
【责任编辑： TEL：（010）】
关于&&的更多文章
又是一周匆匆而过。上周五、周六两天，2013年51CTO云计算架构师
随着云计算、物联网、大数据、移动互联网的大发展，你应该知道这些。
在过去的近十年的时间里，面向对象编程大行其道。以至
很久很久以前，冬天爱上了夏天，可是他们始终不能相见
流火过，金秋来，在学校开学之前的最后一周，终于凉快
本书是Inside Microsoft SQL Server 2005系列四本著作中的一本。它详细介绍了T-SQL的内部构造，包含了非常全面的编程参考。它提
51CTO旗下网站jQuery.curpos.js插件获textarea输入框下光标的位置
作者/代码整理：&&(转载请附加本文地址，带有“懒人原生”字样的谢绝转载) 发布日期：
效果描述：
记得做前端这一块，很多时候需要判断textarea输入框下的光标位置
比如要在输入的文档中插入一些表情符号，图片之类的，这个时候在插入文字之前，
就需要先判断光标的位置了。今天就特意给大家推荐这样一个小方法，已经集成为插件的形式
就不会有冲突的情况发生了
使用方法：
1、将head中的样式复制到你的样式表中
2、将body中的代码部分拷贝过去即可
新增详细页中间广告
猜你喜欢...