在任何编辑器中,获取光标位置都是非常重要的,很多人可能认为较难,其实只要处理好浏览器的兼容,还是比较容易实现的。
下面我们一起来看看如何获取到 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
扩展阅读:
====================================================================================
<!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
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"> <!-- function test2() { var t=document.getElementById("test") var o=t.createTextRange() alert(o.text) o.moveStart("character",2) alert(o.text) o.select() } //--> </SCRIPT> <input type='text' id='test' name='test'><input type=button οnclick='test2()' value='test' name='test3'> 对textarea中的内容,进行选中后,加效果 <script language="JavaScript"> <!-- function bold(){ Qr=document.selection.createRange().text; if(!Qr || document.selection.createRange().parentElement().name!='description') { txt=prompt('Text to be made BOLD.',''); if(txt!=null && txt!='') document.form1.description.value+=''+txt+''; } else{ document.selection.createRange().text=''+document.selection.createRange().text+''; document.selection.empty(); } } //--> </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()函数也可以修改为:
<script language="javascript">
var rng = txtBox.createTextRange();
function findText(str) { if(str=="") return; if(rng.findText(str)) { rng.select(); rng.collapse(false); } //搜索到最后的范围还是找不到,则提示搜索完毕,并重新恢复rng最初的范围(否则无法执行新搜索) else { alert("搜索完毕"); rng = txtBox.createTextRange(); } }
</script>
|
==================================================================================
- <script language="javascript">
-
- 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"><!--
-
-
- function document.oncontextmenu(){event.returnValue=false;}
- function window.onhelp(){return false}
- function document.onkeydown()
- {
- if ((window.event.altKey)&&
- ((window.event.keyCode==37)||
- (window.event.keyCode==39)))
- {
- alert("不准你使用ALT+方向键前进或后退网页!");
- event.returnValue=false;
- }
-
-
-
-
- if ((event.keyCode==8) ||
- (event.keyCode==116)||
- (event.ctrlKey && event.keyCode==82)){
- event.keyCode=0;
- event.returnValue=false;
- }
- if (event.keyCode==122){event.keyCode=0;event.returnValue=false;}
- if (event.ctrlKey && event.keyCode==78) event.returnValue=false;
- if (event.shiftKey && event.keyCode==121)event.returnValue=false;
- if (window.event.srcElement.tagName == "A" && window.event.shiftKey)
- window.event.returnValue = false;
- if ((window.event.altKey)&&(window.event.keyCode==115))
- {
- window.showModelessDialog("about:blank","","dialogWidth:1px;dialogheight:1px");
- return false;
- }
- }
- </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.youkuaiyun.com/linhonglong/archive/2006/03/07/618125.aspx