获取 Textarea 的光标位置
作者:怿飞 来源:怿飞blog 发布时间:2010-11-30 21:33:00
在任何编辑器中,获取光标位置都是非常重要的,很多人可能认为较难,其实只要处理好浏览器的兼容,还是比较容易实现的。
下面我们一起来看看如何获取到 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
猜你喜欢
- 目前可实现:MD5算法、SHA256算法、先MD5后SHA256、先SHA256后MD5、两次MD5、两次SHA256、前8位MD5算法后8
- 当我想要完美的使用:nth-child或者:nth-of-type的时候有点儿头晕。你越理解它们,就能写出越好的CSS规则!在这些简单的”秘
- 摘要:对动态SQL的程序开发进行了总结,并结合笔者实际开发经验给出若干开发技巧。 关键词:动态SQL,PL/SQL,高性能 1. 静态SQL
- 如下:counter.htm<a href=counter.asp?save=123&url=http://127.0.0
- 合理地扩大页面链接响应区域可以提高网页的易用性。同时还要兼顾到链接的交互一致性以及视觉上的平衡,就需要做一些特殊的处理。实例一:一张图配一个
- 一组常用的弹出窗口用法,以下代码集合常用的弹出窗口用法。1、最基本的弹出窗口代码<SCRIPT LANGUAGE="
- 1.了解oracle外部表 外部表定义:结构被存放在数据字典,而表数据被放在OS文件中的表 作用:在数据库中查询OS文件的数据,还可以将OS
- 搞前端应该对语义化并不陌生,每天都在说语义化,可什么是语义化,语义化究竟能给我们带来什么好处?参加web标准交流会的时候我向各位同学提出了我
- 本文总结了input的各种使用方法,挺全面的1.取消按钮按下时的虚线框在input里添加属性值 hideFocus 或者 HideFocus
- 如何用SQL 建表? 如下:CREATE TABLE statement
- 平时在写asp代码的时候有很多重复的内容要写,麻烦的要命,比如在收集表单提交的数据时,特别是表单的输入域比较多时,要不断写好多的reques
- XSL(EXtensible Stylesheet Language)它是指可扩展样式表语言。 XSL之于 XML 就像 CSS 之于 HT
- Web性能优化最佳实践中最重要的一条是减少HTTP请求,它也是YSlow中比重最大的一条规则。减少HTTP请求的方案主要有合并JavaScr
- 如何显示一个等待或欢迎信息? <% Response.Buffer = True %
- 有时候想为我们的网页提供多语言支持,如果一种语言用一张网页来做实在太麻烦了,幸好Google提供了语言工具功能,下面介绍如何利用它来实现网页
- 在SQL中,很多威力都来自于将几个表或查询中的信息联接起来,并将结果显示为单个逻辑记录集的能力。在这种联接中包括INNER、LEFT、RIG
- 简单的说,一个数据库管理系统应该的提供的基本服务有两种:1.数据访问。对每个数据库管理系,数据访问服务都包含一下几种(1)插入--向数据库中
- 是建立一个数据集 前面应该先定义此数据集 dim rs as adodb.recordset 然后就可以用 set rs=server.Cr
- 每次写完的东西就忘了,下次用时还要重查资料重新写,这是今天写的一段测试代码,保留下来,记录给自已,同时分享给大家。目标:把下边的这个上传文件
- 用下列代码可在控制弹出NTLM验证窗口:<% Response.Status = "401 Unauthorized&quo