獲取 Textarea 的光標位置(摘自網絡)
在任何编辑器中,获取光标位置都是非常重要的,很多人可能认为较难,其实只要处理好浏览器的兼容,还是比较容易实现的。
下面我们一起来看看如何获取到 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();
}
}
}
獲取 Textarea 的光標位置(摘自網絡)的更多相关文章
- 實際案例: 獲取臨時票証 (JsApi Ticket)
專案中選用大名鼎鼎的 Senparc 微信開發套件 獲取臨時票證處理常式的程式碼 (GetgVXinInfo.ashx) using Senparc.Weixin; using Senparc.Wei ...
- TextArea中定位光标位置
原文:TextArea中定位光标位置 在项目中,遇到一个场景:希望能在TextArea中输入某条记录中的明细(明细较简单,没有附属信息,只用记录顺序和值即可,譬如用"+"号来作为明 ...
- jquery html 獲取或設置
jquery提供操作html元素的屬性和內容的強大方法. DOM就是獨立于平台和語言的界面,允許程序和腳本動態訪問和改變DOM的內容,結構和樣式. 獲取內容:text(),html(),val(),a ...
- 實際案例: 已知要獲取臨時票証 (JsApi Ticket) 才能調用的接口
需獲取票証才能調用的接口,簡單列示如下: 一.基礎類 1. wx.checkJsApi (當前客戶端是否支持指定JS) 二.分享類 1.wx.onMenuShareTimeline (分享到朋友圈)2 ...
- C#-Windows服務以LocalSystem賬戶安裝的話無法獲取我的文檔路徑
如圖,如果Window服務以上圖 Account安裝運行,則無法獲取到 以下路徑: System.Environment.GetFolderPath(Environment.SpecialFolder ...
- 自動獲取外網IP并發郵件
問題: 公司有一Web系統需開放給香港Office公司查詢資料,但最近動態域名需實名認證, 因系統較小型,非公開大範圍使用,所以再認證一域名也沒多大必要, 所以想定時生成一封能查詢外網IP的郵件發送給 ...
- JavaScript從剪切板中獲取圖片並在光標處插入
edit_content_text.addEventListener('paste', function (ev) { var clipboardData, items, item; co ...
- 在windows平臺下使用cygwin獲取root用戶權限
最近在使用cygwin時發現一個問題,當我要使用root用戶權限時,竟然創建不了root賬戶.最後在網上找了下後,暫時衹找到了通過更改當前用戶權限獲得root權限的方法,具體如下: 实际环境:win1 ...
- B/S 獲取客戶端Mac地址
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx. ...
随机推荐
- centos7/RHEL7安装LibreOffice
1.下载 wget http://download.documentfoundation.org/libreoffice/testing/4.4.0/rpm/x86_64/LibreOfficeDev ...
- 原生Ajax + Promise
有原生写的ajax + promise嫁接下 ;(function(root){ var LD = function(obj){ if( obj instanceof LD ) return obj; ...
- PHP面向对象(OOP):__set(),__get(),__isset(),__unset()四个方法的应用
一般来说,总是把类的属性定义为private,这更符合现实的逻辑.但是, 对属性的读取和赋值操作是非常频繁的,因此在PHP5中,预定义了两个函数”__get()”和”__set()”来获取和赋值其属性 ...
- TatukGIS - GisDefs - ColorToHSL 过程
过程名称 ColorToHSL 所在单元 GisDefs 过程原型 procedure ColorToHSL(const _color: TColor; var _h: Rea ...
- 20141127 测试使用Word2013书写博客(代码高亮+公式支持)。
PS :又经过几次测试,发现用于Word2010的高亮插件在Word2013上排版效果不是很好,慎用.不过公式编辑倒是挺方便的 测试使用Word2013书写博客. 大概一个月前,使用WindowL ...
- Unity3D 3D横版跑酷
Unity3d 3D横版跑酷系列(Character Controller组件) @广州小龙 目前在做一个3D跑酷的横版游戏,目前说一下 Character Controller组件! 1.Slop ...
- ASP.NET内置对象
ASP.NET中有六个内置对象 Response:向客户端输出信息或设置客户端输出状态. Request:获取客户端信息. Server:访问服务器的方法和属性. Application:用于将信息保 ...
- 【HDOJ】2363 Cycling
二分+Dijkstra. #include <iostream> #include <cstdio> #include <cstring> #include < ...
- 【算法Everyday】第一日 二叉查找树转双向链表
算法题目链接:http://bbs.csdn.net/topics/350093707 题目 // 1.把二元查找树转变成排序的双向链表 // 题目: // 输入一棵二元查找树,将该二元查找树转换成一 ...
- java一切乱码的解释 以及源头【转】
工作中经常遇到java编码问题,由于缺乏研究,总是无法给出确切的答案,这个周末在网上查了一些资料,在此做些汇总. 问题一:在java中读取文件时应该采用什么编码? Java读取文件的方式总体可以分为两 ...