您的位置:首页 > 其它

JQ插件:获取文本框(textarea)内的所选字符和光标位置索引值-selection

2012-03-14 15:09 405 查看
用javascript写网页编辑器,获取textarea中的光标位置和选取的文本是一个非常常见的问题。今天用jQ封装了这么一个插件。
在Firefox,safari,chrome,opera的标准浏览器下获取这些textarea中的光标位置非常简单:

function Selection(obj)
var start =obj.selectionStart;
var end = obj.selectionEnd;
return {"start":start,"end":end}
}

这里的obj是文本框或者文本域对象;

如果要获取所选择的文本那就很简单了:

obj.value.substring(Selection(obj).start,Selection(obj).end)

点击查看demo:http://www.css88.com/demo/edit-box/ff-test.html

悲剧的是IE就比较麻烦了,ie如果要获取所选择的文本还是非常简单的,可以直接使用:

document.selection.createRange().text;

但是ie要获取光标在字符串中的索引位置就比较麻烦了:

if(this[0].selectionStart == undefined){

var selection=document.selection;

if (this[0].tagName.toLowerCase() != "textarea") {

var val = this.val();

range = selection.createRange().duplicate();

range.moveEnd("character", val.length);

s = (range.text == "" ? val.length:val.lastIndexOf(range.text));

range = selection.createRange().duplicate();

range.moveStart("character", -val.length);

e = range.text.length;

}else {

range = selection.createRange();

stored_range = range.duplicate();

stored_range.moveToElementText(this[0]);

stored_range.setEndPoint('EndToEnd', range);

s = stored_range.text.length - range.text.length;

e = s + range.text.length;

}

}

这里的s就是光标在字符串中的开始索引位置,e就是光标在字符串中的结束索引位置。

下面是jq的插件代码:

(function($){

$.fn.selection = function(){

var s,e,range,stored_range;

if(this[0].selectionStart == undefined){

var selection=document.selection;

if (this[0].tagName.toLowerCase() != "textarea") {

var val = this.val(),

range = selection.createRange().duplicate();

range.moveEnd("character", val.length);

s = (range.text == "" ? val.length:val.lastIndexOf(range.text));

range = selection.createRange().duplicate();

range.moveStart("character", -val.length);

e = range.text.length;

}else {

range = selection.createRange();

stored_range = range.duplicate();

stored_range.moveToElementText(this[0]);

stored_range.setEndPoint('EndToEnd', range);

s = stored_range.text.length - range.text.length;

e = s + range.text.length;

}

}else{

s=this[0].selectionStart;

e=this[0].selectionEnd;

}

var te=this[0].value.substring(s,e);

return {start:s,end:e,text:te}

};

})(jQuery);

来源: http://www.css88.com/archives/2316
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: