获取 Textarea 元素当前的光标位置及document.selection.createRange()资料

技术2025-05-14 55

在任何编辑器中，获取光标位置都是非常重要的，很多人可能认为较难，其实只要处理好浏览器的兼容，还是比较容易实现的。

下面我们一起来看看如何获取到 Textarea 元素中的光标位置（测试地址）。

首先，我们用 rangeData 对象作为数据存储，并获得焦点：

var rangeData = {start: 0, end: 0, text: "" }; textarea.focus();

对于非 IE 浏览器获取选区的起始和末尾位置其实非常容易：

rangeData.start= el.selectionStart; rangeData.end = el.selectionEnd;

通过截取我们可以得到光标的选区内容：

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.text;

并且我们可以通过 oS.getBookmark() 方法获取到选区的位置数据，该位置数据可以通过 moveToBookmark() 方法设置回去。

getBookmark: Retrieves a bookmark (opaque string) that can be used with moveToBookmark to return to the same range.

moveToBookmark: Moves to a bookmark.

我们用 rangeData.bookmark 来记录该位置数据：

rangeData.bookmark = oS.getBookmark();

下面是最重要的步骤：我们比较 oR 与 oS 的选区起始位置（使用 object.compareEndPoints(sType, oRange) 方法比较），如果 oR 的起始位置在 oS 之前，我们向前移动 oS 的起始位置1个字符（使用 object.moveStart(sUnit [, iCount]) 方法移动），一直当 oS 的起始位置在 oR 之前停止，移动的位置，则是选区的起始位置。

compareEndPoints: Compares an end point of a TextRange object with an end point of another range.

moveStart: Changes the start position of the range.

for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i ++) {} rangeData.start = i;

但由于在 IE 中，Textarea 元素中的所有换行符都占 1 个字符，可以通过 alert(textarea.value.length) 查看，故要对上面的代码做部分处理：

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') { i ++; } } rangeData.start = i;

既然得到了选区的起始位置和选区字符串的字符，很自然我们可以计算得到选区的末尾位置：

rangeData.end = rangeData.text.length + rangeData.start;

获取 Textarea 的光标位置的 getCursorPosition 函数方法整理如下：

/** * getCursorPosition Method * * Created by Blank Zheng on 2010/11/12. * 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.selectionStart; rangeData.end = textarea.selectionEnd; rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end): ""; } else if (document.selection) { // IE var i, oS = document.selection.createRange(), // Don't: oR = textarea.createTextRange() oR = document.body.createTextRange(); oR.moveToElementText(textarea); rangeData.text = oS.text; 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') { i ++; } } rangeData.start = i; rangeData.end = rangeData.text.length + rangeData.start; } return rangeData; }

得到 Textarea 元素光标位置，当Textarea 中的光标丢失了，再设置回来就简单多了：

/** * setCursorPosition Method * * Created by Blank Zheng on 2010/11/12. * 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(); } else { oR.moveToBookmark(rangeData.bookmark); oR.select(); } } }

测试地址：http://www.planabc.net/demo/range/textarea-cursor-position.html

扩展阅读：

《TextRange Prototype》《TextArea Cursor Position with JavaScript》

====================================================================================

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Demo ： Textarea 元素的光标位置</title><style>#result { font-size:18px; line-height:25px; padding-left:20px;}</style></head>

<body>

<h1>Textarea 元素的光标位置</h1><ul> <li>获取 Textarea 元素当前的光标位置</li> <li>设置回原先的 Textarea 元素的光标位置</li> <li>在 Textarea 元素的光标位置插入文本</li></ul>

<h2>Textarea Range：</h2><div id="result"></div>

/** * cursorPosition Object * * Created by Blank Zheng on 2010/11/12. * 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. */ var cursorPosition = { get: function (textarea) { var rangeData = {text: "", start: 0, end: 0 }; if (textarea.setSelectionRange) { // W3C textarea.focus(); rangeData.start= textarea.selectionStart; rangeData.end = textarea.selectionEnd; rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end): ""; } else if (document.selection) { // IE textarea.focus(); var i, oS = document.selection.createRange(), // Don't: oR = textarea.createTextRange() oR = document.body.createTextRange(); oR.moveToElementText(textarea); rangeData.text = oS.text; 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) == '/r' ) { i ++; } } rangeData.start = i; rangeData.end = rangeData.text.length + rangeData.start; } return rangeData; }, set: function (textarea, rangeData) { var oR, start, end; if(!rangeData) { alert("You must get cursor position first.") } textarea.focus(); if (textarea.setSelectionRange) { // W3C textarea.setSelectionRange(rangeData.start, rangeData.end); } else if (textarea.createTextRange) { // IE oR = textarea.createTextRange(); // Fixbug : ues moveToBookmark() // In IE, if cursor position at the end of textarea, the set function don't work if(textarea.value.length === rangeData.start) { //alert('hello') oR.collapse(false); oR.select(); } else { oR.moveToBookmark(rangeData.bookmark); oR.select(); } } },

add: function (textarea, rangeData, text) { var oValue, nValue, oR, sR, nStart, nEnd, st; this.set(textarea, rangeData); if (textarea.setSelectionRange) { // W3C oValue = textarea.value; nValue = oValue.substring(0, rangeData.start) + text + oValue.substring(rangeData.end); nStart = nEnd = rangeData.start + text.length; st = textarea.scrollTop; textarea.value = nValue; // Fixbug: // After textarea.values = nValue, scrollTop value to 0 if(textarea.scrollTop != st) { textarea.scrollTop = st; } textarea.setSelectionRange(nStart, nEnd); } else if (textarea.createTextRange) { // IE sR = document.selection.createRange(); sR.text = text; sR.setEndPoint('StartToEnd', sR); sR.select(); } }}

var tx=document.getElementById("test"), re=document.getElementById("result"), pos;

document.getElementById("get").onclick = function(){ //alert(tx.value.length); pos = cursorPosition.get(tx); re.innerHTML=("<strong>Range :</strong> (" + pos.start + ", " + pos.end + ")<br /><strong>Text :</strong> " + (!pos.text ? '//--': pos.text));}

document.getElementById("set").onclick = function(){ cursorPosition.set(tx, pos);}

document.getElementById("add").onclick = function(){ cursorPosition.add(tx, pos, input = prompt("你想插入替换的文本：",""));}</script>

</body></html>===================================================================================

【转】DOM-document.selection.createRange方法和TextRange对象 2010-06-29 13:55

document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象。

配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。

实例一：

<textarea cols=50 rows=15>哈哈。我们都是新生来得。大家都来相互帮助呀。这样我们才能进步，我们才能赚大钱！</textarea><input type=button value=选择字后点击我看看 οnclick=alert(document.selection.createRange().text)></form>

实例二：

<body> <textarea name="textfield" cols="50" rows="6">就是现在文本域里有一段文字，当你选种其中几个字后点击一个按钮或者链接会弹出一个对话框，对话框的信息就是你选中的文字哪位老大能解决的呀?请多多帮忙!!!谢谢</textarea> <input type="button" value="showSelection" οnclick="alert(document.selection.createRange().text)"> <input type="button" value="showclear" οnclick="alert(document.selection.clear().text)"> <input type="button" value="showtype" οnclick="alert(document.selection.type)"> <textarea name="textfield" cols="50" rows="6" οnselect="alert(document.selection.createRange().text)">就是现在文本域里有一段文字，当你选种其中几个字后点击一个按钮或者链接会弹出一个对话框，对话框的信息就是你选中的文字哪位老大能解决的呀?请多多帮忙!!!谢谢 </textarea>

</body>

实例三：选中Input中的文本

<SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <input type='text' id='test' name='test'><input type=button οnclick='test2()' value='test' name='test3'>对textarea中的内容，进行选中后，加效果<script language="JavaScript"></script><input type="button" value="加粗" οnclick="bold();" /><textarea name="description" style="width: 436px; height: 296px">选中我，点击加粗</textarea> 实例四：javascript捕获到选中的网页中的纯文本内容<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>鼠标取词</title><script>function getSel(){ var t=window.getSelection?window.getSelection():(document.getSelection?document.getSelection():(document.selection?document.selection.createRange().text:"")) document.forms[0].selectedtext.value = t;}</script></head><body οnmοuseup="getSel()"><form><textarea name="selectedtext" rows="5" cols="50"></textarea></form>以上的代码可以捕获到选中的网页中的纯文本内容(不含HTML标签)如果想获得包含html的内容，将document.selection.createRange().text改成document.selection.createRange().htmlText</body></html>

DOM-TextRange对象使用及方法

TextRange对象是动态HTML(DHTML)的高级特性，使用它可以实现很多和文本有关的任务，例如搜索和选择文本。文本范围让您可以选择性的将字符、单词和句子从文档中挑选出来。TextRange对象是在HTML文档将要显示的文本流上建立开始和结束位置的抽象对象。

下面是TextRange的常用属性与方法：

属性 boundingHeight 获取绑定TextRange对象的矩形的高度 boundingLeft 获取绑定TextRange 对象的矩形左边缘和包含TextRange对象的左侧之间的距离 offsetLeft 获取对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置 offsetTop 获取对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置 htmlText 获取绑定TextRange对象的矩形的宽度 text 设置或获取范围内包含的文本方法 moveStart 更改范围的开始位置 moveEnd 更改范围的结束位置 collapse 将插入点移动到当前范围的开始或结尾 move 折叠给定文本范围并将空范围移动给定单元数 execCommand 在当前文档、当前选中区或给定范围上执行命令 select 将当前选择区置为当前对象 findText 在文本中搜索文本并将范围的开始和结束点设置为包围搜索字符串。

使用TextRange对象通常包括三个基本的步骤:

1.创建文本范围 2.设置开始点和结束点 3.对范围进行操作 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script language="javascript"> function moveCursor() { 　　　 var temp = this.txtNum.value; 　　　 if(isNaN(temp)) 　　　 { 　　　　　alert("请输入一个数字"); 　　　　　return; 　　　 } 　　　 var rng = this.txtTest.createTextRange(); 　　　rng.move("character",temp); 　　　 rng.select();　　　 } </script> </HEAD> <BODY> <input type="text" name="txtTest" value="明·罗贯中《三国演义》第二十一回操曰:“夫英雄者，胸怀大志，腹有良谋，有包藏宇宙之机，吞吐天地之志者也。" size="100"><br> 移动光标到第<input type="text" name="txtNum" size="5">个位置 <input type="button" name="btnMove" value="移动" οnclick="moveCursor()"> </BODY> </HTML>

1.createTextRange()

创建一个TextRange对象,BODY、TEXT、TextArea、BUTTON等元素都支持这个方法。该方法返回一个TextRange对象。

2.move("Unit"[,count])

move()方法执行两个操作。首先，方法在前一个结束点的位置重叠当前文档，将这里作为一个插入点；下一步，它将插入点向前或向后移动任意个字符、单词或句子单位。

方法的第一个参数是字符串，它指定的单位有character(字符)、word(词)、sentence(段落)、textedit。textedit值将插入点移动到整个文本范围的结束处(不需要参数)。如果指定为前三种单位，忽略参数时默认值为1,也可以指定一个整数值来指示单元数，正数代表向前移动，负数代表向后移动。

注意在move()方法执行后范围仍是重叠的。

3.select()

select()方法选择当前文本范围内的文本，这里的显示光标也必须利用它来实现，因为所谓的"光标"可以理解为边界重合的范围

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""></HEAD><BODY><textarea name="txtBox" rows="7" cols="50" id="txtBox">菊花台 (满城尽带黄金甲主题曲) 歌手：周杰伦专辑：依然范特西

你的泪光柔弱中带伤惨白的月弯弯勾住过往夜太漫长凝结成了霜是谁在阁楼上冰冷的绝望雨轻轻淌朱红色的窗我一生在纸上被风吹乱梦在远方化成一缕霞随风飘散你的模样

菊花惨淡地伤你的笑容已泛黄花落人断肠我心事静静淌北风乱夜未央你的影子剪不断徒留我孤单在湖面生霜 </textarea><br><input type="text" value="输入要查询的内容" id="txtFind"><input type="button" value="查找下一个" οnclick="findText(txtFind.value)"><script language="javascript">var rng = txtBox.createTextRange();function findText(str){　　 if(str=="")　　 return;　　 //定义一个变量，作为moveStart()函数的偏移量，即开始点跳过选择文本　　 var num = 0;　　 if(document.selection)　　　　 num = document.selection.createRange().text.length;　　 //每次调用函数，结束点都为末尾，而开始点是跳过选择文本后的新开始点　　 rng.moveStart("character",num);　　 rng.moveEnd("character",txtBox.value.length);　　 //搜索到后选择文本　　　　 if(rng.findText(str))　　 rng.select();　　 //搜索到最后的范围还是找不到，则提示搜索完毕，并重新恢复rng最初的范围(否则无法执行新搜索)　　　　 if(rng.text!=str)　　{　　　　 alert("搜索完毕");　　 rng = txtBox.createTextRange();　　 }}　　 </script> </BODY></HTML>

上面的例子演示了利用moveStart()和moveEne()方法选择范围，出现的几个方法的说明如下：

4.moveStart("Unit"[,count])与moveEnd("Unit"[,count])

moveStart()与moveEnd()方法类似于move()方法,默认情况下开始点为容器第一个字符、结束点为最后一个字符

我们可以修改上面的selectText()函数来证明:

function selectText() { 　 var rng = txtBox.createTextRange(); 　 rng.moveStart("character",1); 　 rng.moveEnd("character",-1); 　 rng.select(); } 将开始点向前移动一个字符、结束点向后移动一个字符，运行后可以看到选择的范围是除第1个字符和最后1个字符的整个文本范围。

5.collapse([Boolean])

可以用collapse()方法把文本范围从当前尺寸重叠成字符间的单个插入点。collapse()方法的可选参数是Boolean值,它指出范围是在当前范围的开始点重合，还是结束点重合。默认值为true，在开始点重合:

5.findText("searchString"[,searchScope,flags])

TextRange对象最有用的方法之一是findText()方法，其默认行为是从开始点到结束点浏览文本范围，搜索一个不区分大小写的字符串匹配。如果在范围中发现一个实例，范围的开始点和结束点就放到这个文本中，方法返回true；否则返回false,开始点和结束点都不动。方法仅搜索显示文本，而任何标记或属性都不会被搜索。

可选参数searchScope是一个整数值，它指示从开始点的字符数，值越大，包含在搜索范围的文本越多；负值将迫使搜索操作从当前开始点向后搜索。

可选参数flag用来设置搜索是否区分大小写，或者是否仅匹配整个单词。参数是整数值，它用按位组合的数学方法计算单个值，这些值能容纳一个或多个设置。匹配整个单词的值为2；匹配大小写的值为4；如果只想匹配一项，则只提供希望的值就够了，但对于两种行为，要用位操作XOR操作符(^操作符)使值为6。

findText()方法最常用的应用包括范围中的查找和替换操作，以及格式化一个字符串的实例，因为搜索通常以范围的当前开始点开始，所以再次查询要将开始点移到范围中匹配文本的末尾(如示例3)，移动后才能使findText()继续浏览剩下的文本范围，来查找另一个匹配。可以使用collapse(false)方法迫使开始点移动第一个匹配的范围的结束点。所以示例3的findText()函数也可以修改为:

var rng = txtBox.createTextRange();

</script>

==================================================================================

==============================================================================

============================================================================

# 屏蔽退格删除键,屏蔽F5 刷新键,Ctrl+R <body οnkeydοwn="KeyDown()"> <script language=javascript> function KeyDown() { //屏蔽退格删除键,屏蔽 F5 刷新键,Ctrl + R if ((event.keyCode==116)||(event.ctrlKey && event.keyCode==82)) { event.keyCode=0; event.returnValue=false; //为什么还要加上这一句 } </script>

============================================================================

如下一段代码：

<html> <script> function checkForm(){ if(event.keyCode ==13){ event.keyCode =9; } } </script> <body> <form name ="form1"> <input type="text" name = "text1" onkeydown = "checkForm()"> <input type="button" name = "button1" value="按钮"> </form> </body></html>

当按下回车时，焦点从文本框移到按钮上。如果把它换成“onkeypress”，焦点不会转移，也不会失去。但是如果换成“onkeyup”，则失去焦点，页面重新载入。msdn上有三者的区别：

名称说明 onkeypress 这个事件在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别。 onkeyup 这个事件在用户放开任何先前按下的键盘键时发生。 onkeydown 这个事件在用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生。

（但是试验中，onkeypress好像对箭头和功能键都能识别，奇怪！）。对于onkeyup为什么会重新刷新页面，原因不详。猜想是不是浏览器对于onkeyup有默认的执行事件，其默认的执行事件就是重新载入页面。有待以后了解！还有一点要注意，就是键盘上的同一个值，可能对应的onkeypress和onkeydown（onkeyup一般和onkeydown一样）不同，比如小键盘上的“1”，对应的onkeypress的值为49，而onkeydown和onkeyup则都是97！msdn上有个例子，可以很好的查看不同的键盘值对应的不同事件值。url：http://msdn.microsoft.com/library/en-us/dnacc/html/Example3_Calculator.asp

本文来自博客，转载请标明出处：http://blog.csdn.net/linhonglong/archive/2006/03/07/618125.aspx

最新回复(0)