您的位置：首页 > 其它

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

2011-02-12 16:19 477 查看

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

下面我们一起来看看如何获取到 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>

<form action="#">
<textarea id="test" rows="8" cols="50"></textarea>
<p>
<input type="button" id="get" value="Get Cursor Position"/>
<input type="button" id="set" value="Set Cursor Position"/>
<input type="button" id="add" value="Add Text After Cursor Position"/>
</p>
</form>

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

<script type="text/javascript">

/**
* 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

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

<script language="javascript">

//禁止用F5键

function document.onkeydown()

{

if ( event.keyCode==116)

{

event.keyCode = 0;

event.cancelBubble = true;

return false;

}

}

//禁止右键弹出菜单

function document.oncontextmenu()

{

return false;

}

//下面代码实现全屏显示

function window.onload(){

var Request = new Array();//保存参数

var s = location.search.substring(1);

if (s && s!=""){

var list = s.split("&");

for (var i=0; i < list.length; i++){

var pair = list[i].split("=");

if (pair[0] && pair[0] !=""){

Request[unescape(pair[0])] = unescape(pair[1]);

}

}

}

var fullscreen=Request["fullscreen"];

if(fullscreen!="yes"){

var file =self.location;

var a = window.open("about:blank","","fullscreen=yes")

self.opener=null

self.close()

a.location=file + "?fullscreen=yes";

}

}

</script>

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

<script language="Javascript"><!--

//屏蔽鼠标右键、Ctrl+N、Shift+F10、F11、F5刷新、退格键

//Author: meizz(梅花雨) 2002-6-18

function document.oncontextmenu(){event.returnValue=false;}//屏蔽鼠标右键

function window.onhelp(){return false} //屏蔽F1帮助

function document.onkeydown()

{

if ((window.event.altKey)&&

((window.event.keyCode==37)|| //屏蔽 Alt+ 方向键 ←

(window.event.keyCode==39))) //屏蔽 Alt+ 方向键 →

{

alert("不准你使用ALT+方向键前进或后退网页！");

event.returnValue=false;

}

/* 注：这还不是真正地屏蔽 Alt+ 方向键，

因为 Alt+ 方向键弹出警告框时，按住 Alt 键不放，

用鼠标点掉警告框，这种屏蔽方法就失效了。以后若

有哪位高手有真正屏蔽 Alt 键的方法，请告知。*/

if ((event.keyCode==8) || //屏蔽退格删除键

(event.keyCode==116)|| //屏蔽 F5 刷新键

(event.ctrlKey && event.keyCode==82)){ //Ctrl + R

event.keyCode=0;

event.returnValue=false;

}

if (event.keyCode==122){event.keyCode=0;event.returnValue=false;} //屏蔽F11

if (event.ctrlKey && event.keyCode==78) event.returnValue=false; //屏蔽 Ctrl+n

if (event.shiftKey && event.keyCode==121)event.returnValue=false; //屏蔽 shift+F10

if (window.event.srcElement.tagName == "A" && window.event.shiftKey)

window.event.returnValue = false; //屏蔽 shift 加鼠标左键新开一网页

if ((window.event.altKey)&&(window.event.keyCode==115)) //屏蔽Alt+F4

{

window.showModelessDialog("about:blank","","dialogWidth:1px;dialogheight:1px");

return false;

}

}

</script>

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

# 屏蔽退格删除键,屏蔽F5 刷新键,Ctrl+R

<body onkeydown="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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航