2003年6月 总版技术专家分月排行榜第二2003年5月 总版技术专家分月排行榜第二
2003年9月 Web 开发大版内专家分月排行榜第一2003年7月 Web 开发大版内专家分月排行榜第一2003年6月 Web 开发大版内专家分月排行榜第一2003年5月 Web 开发大版内专家分月排行榜第一2003年4月 Web 开发大版内专家分月排行榜第一
2005年4月 Web 开发大版内专家分月排行榜第二2008年4月 Web 开发大版内专家分月排行榜第二2008年3月 Web 开发大版内专家分月排行榜第二
2005年3月 Web 开发大版内专家分月排行榜第三
本帖子已过去太久远了，不再提供回复功能。jQuery或者JavaScript实现在textarea光标处插入文本_Linux编程_Linux公社-Linux系统门户网站
你好，游客
jQuery或者JavaScript实现在textarea光标处插入文本
来源：Linux社区&
作者：niuox
1.Jquery函数实现：
$(function()&{&&
&&&&(function($)&{&&
&&&&&&&&$.fn&&
&&&&&&&&&&&&&&&&.extend({&&
&&&&&&&&&&&&&&&&&&&&insertContent&:&function(myValue,&t)&{&&
&&&&&&&&&&&&&&&&&&&&&&&&var&$t&=&$(this)[0];&&
&&&&&&&&&&&&&&&&&&&&&&&&if&(document.selection)&{&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&this.focus();&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&var&sel&=&document.selection.createRange();&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&sel.text&=&myV&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&this.focus();&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&sel.moveStart('character',&-l);&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&var&wee&=&sel.text.&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&if&(arguments.length&==&2)&{&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&var&l&=&$t.value.&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&sel.moveEnd("character",&wee&+&t);&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&t&&=&0&?&sel.moveStart("character",&wee&-&2&*&t&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-&myValue.length)&:&sel.moveStart(&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&"character",&wee&-&t&-&myValue.length);&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&sel.select();&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&}&&
&&&&&&&&&&&&&&&&&&&&&&&&}&else&if&($t.selectionStart&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&||&$t.selectionStart&==&'0')&{&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&var&startPos&=&$t.selectionS&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&var&endPos&=&$t.selectionE&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&var&scrollTop&=&$t.scrollT&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&$t.value&=&$t.value.substring(0,&startPos)&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&+&myValue&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&+&$t.value.substring(endPos,&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&$t.value.length);&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&this.focus();&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&$t.selectionStart&=&startPos&+&myValue.&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&$t.selectionEnd&=&startPos&+&myValue.&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&$t.scrollTop&=&scrollT&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&if&(arguments.length&==&2)&{&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&$t.setSelectionRange(startPos&-&t,&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&$t.selectionEnd&+&t);&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&this.focus();&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&}&&
&&&&&&&&&&&&&&&&&&&&&&&&}&else&{&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&this.value&+=&myV&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&this.focus();&&
&&&&&&&&&&&&&&&&&&&&&&&&}&&
&&&&&&&&&&&&&&&&&&&&}&&
&&&&&&&&&&&&&&&&})&&
&&&&})(jQuery);&&
});&&调用方法：
$(文本域选择器).insertContent("插入的内容");&//$(文本域选择器).insertContent("插入的内容"，数值); //根据数值选中插入文本内容两边的边界, 数值: 0是表示插入文字全部选择，-1表示插入文字两边各少选中一个字符。
2.JavaScript实现：
function&insertText(obj,str)&{&&
&&&&if&(document.selection)&{&&
&&&&&&&&var&sel&=&document.selection.createRange();&&
&&&&&&&&sel.text&=&&&
&&&&}&else&if&(typeof&obj.selectionStart&===&'number'&&&&typeof&obj.selectionEnd&===&'number')&{&&
&&&&&&&&var&startPos&=&obj.selectionStart,&&
&&&&&&&&&&&&endPos&=&obj.selectionEnd,&&
&&&&&&&&&&&&cursorPos&=&startPos,&&
&&&&&&&&&&&&tmpStr&=&obj.&&
&&&&&&&&obj.value&=&tmpStr.substring(0,&startPos)&+&str&+&tmpStr.substring(endPos,&tmpStr.length);&&
&&&&&&&&cursorPos&+=&str.&&
&&&&&&&&obj.selectionStart&=&obj.selectionEnd&=&cursorP&&
&&&&}&else&{&&
&&&&&&&&obj.value&+=&&&
function&moveEnd(obj){&&
&&&&obj.focus();&&
&&&&var&len&=&obj.value.&&
&&&&if&(document.selection)&{&&
&&&&&&&&var&sel&=&obj.createTextRange();&&
&&&&&&&&sel.moveStart('character',len);&&
&&&&&&&&sel.collapse();&&
&&&&&&&&sel.select();&&
&&&&}&else&if&(typeof&obj.selectionStart&==&'number'&&&&typeof&obj.selectionEnd&==&'number')&{&&
&&&&&&&&obj.selectionStart&=&obj.selectionEnd&=&&&
相关资讯 & & &
& (07月04日)
& (08/20/:11)
& (05/02/:06)
& (01月30日)
& (07/16/:06)
& (04/29/:26)
　　　同意评论声明
　　　发表
尊重网上道德，遵守中华人民共和国的各项有关法律法规
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
本站管理人员有权保留或删除其管辖留言中的任意内容
本站有权在网站内转载或引用您的评论
参与本评论即表明您已经阅读并接受上述条款在任何编辑器中，获取光标位置都是非常重要的，很多人可能认为较难，其实只要处理好浏览器的兼容，还是比较容易实现的。
下面我们一起来看看如何获取到 Textarea 元素中的光标位置（）。
首先，我们用 rangeData 对象作为数据存储，并获得焦点：
var rangeData = {start: 0, end: 0, text: "" };
textarea.focus();
对于非 IE 浏览器获取选区的起始和末尾位置其实非常容易：
rangeData.start= el.selectionS
rangeData.end = el.selectionE
通过截取我们可以得到光标的选区内容：
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.
并且我们可以通过 oS.getBookmark() 方法获取到选区的位置数据，该位置数据可以通过 moveToBookmark() 方法设置回去。
: Retrieves a bookmark (opaque string) that can be used with moveToBookmark to return to the same range.
: Moves to a bookmark.
我们用 rangeData.bookmark 来记录该位置数据：
rangeData.bookmark = oS.getBookmark();
下面是最重要的步骤：我们比较 oR 与 oS 的选区起始位置（使用 <pareEndPoints(sType, oRange) 方法比较），如果 oR 的起始位置在 oS 之前，我们向前移动 oS 的起始位置1个字符（使用 object.moveStart(sUnit [, iCount]) 方法移动），一直当 oS 的起始位置在 oR 之前停止，移动的位置，则是选区的起始位置。
: Compares an end point of a TextRange object with an end point of another range.
: Changes the start position of the range.
for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 &#038;&#038; oS.moveStart("character", -1) !== 0; i ++) {}
rangeData.start =
但由于在 IE 中，Textarea 元素中的所有换行符都占 1
个字符，可以通过 alert(textarea.value.length) 查看，故要对上面的代码做部分处理：
for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 &#038;&#038; oS.moveStart("character", -1) !== 0; i ++) {
// Why? You can alert(textarea.value.length)
if (textarea.value.charAt(i) == '\n') {
rangeData.start =
既然得到了选区的起始位置和选区字符串的字符，很自然我们可以计算得到选区的末尾位置：
rangeData.end = rangeData.text.length + rangeData.
获取 Textarea 的光标位置的 getCursorPosition 函数方法整理如下：
* getCursorPosition Method
* Created by Blank Zheng on .
* 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.selectionS
rangeData.end = textarea.selectionE
rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end): "";
} else if (document.selection) { // IE
oS = document.selection.createRange(),
// Don't: oR = textarea.createTextRange()
oR = document.body.createTextRange();
oR.moveToElementText(textarea);
rangeData.text = oS.
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 &#038;&#038; oS.moveStart("character", -1) !== 0; i ++) {
// Why? You can alert(textarea.value.length)
if (textarea.value.charAt(i) == '\n') {
rangeData.start =
rangeData.end = rangeData.text.length + rangeData.
return rangeD
得到 Textarea 元素光标位置，当Textarea 中的光标丢失了，再设置回来就简单多了：
* setCursorPosition Method
* Created by Blank Zheng on .
* 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();
oR.moveToBookmark(rangeData.bookmark);
oR.select();
测试地址：
扩展阅读：
这篇文章发表日 下午 19:47，并被分类于。
您可以通过订阅
跟踪对这篇文章的评论，
也可以，或者在您自己的网站中
该篇日志。更好的工作机会
在100offer，提交一份个人资料，一周内即会有5-10家Top互联网公司主动向你发出邀请。100offer确保你的隐私万无一失，同时Consultant将为你全程提供专业服务。
最具价值web全栈课程
只做前端开发培训的好学校，专注于多方向全栈工程师培养。前端名师邵山欢亲自授课，课程涵盖HTML5、CSS3、Node.js、Angular、React诸多课程，免费视频广受学生好评。
跟牛人学前端
跟牛人学前端
妙味大前端自学宝典
妙味课堂2016年JavaScript课程大纲震撼升级、全栈来袭！
前端最新干货
前端最新干货
web在线直播课
潭州教育是中国较早的在线教育平台,教学内容涵盖网络营销,java,javascript,jquery,android,ios,mysql,围棋,刺绣,养殖,农业,手艺,网页设计,平面设计,影视后期,CAD建筑机械,网络营销,商战智慧,办公软件,三维设计,工业设计,淘宝摄影,英语,音乐,大学代理,Photoshop教程,
Max教程,Maya教程,CAD教程,会声会影教程,AI教程,淘宝开店,摄影教程,免费教程,素材下载等众多在线学习精品课程。经过10年的发展,潭州教育已经发展为中国规模较大的在线教育平台。
百度大牛教你学前端
爱创课堂由前百度工程师，《javaScript设计模式》张容铭老师创立，公司秉承纯干货，不忽悠的态度专注前端培训，让每个零基础的学员都能真正的从入门到精通。爱创课堂北京最具深度和口碑的JavaScript、HTML5培训，前端培训，专注于让学员获得快乐的学习体验并找到高薪工作的培训——数百名毕业学员高薪就职大型互联网公司.
前端开发进阶课程
从前端小工到 BAT 中高级工程师的必备技能
您的位置： &#187; 分类:
&#187; 文章: JQ插件：获取文本框（textarea）内的所选字符和光标位置索引值-selection
您可能感兴趣的文章
近期最热文章
- 2,292 - 2,228 - 1,779 - 907 - 893 - 764
关注WEB前端开发公众号