jQuery插件之insertContent-在文本框光标位置插入内容

在文本框光标位置插入内容在前端开发中是经常用到,比如在文本框插入表情、选中文字加粗、内容中插入图片等等。
IE下通过document.selection.createRange()获取光标位置并插入内容:

if (document.selection) {
			//IE support
			this.focus();
			sel = document.selection.createRange();
			sel.text = tagName;
			this.focus();
            }

FF2+, Safari, Chrome 则需要首先获取光标位置,然后对value进行字符串截取处理:

if (this.selectionStart || this.selectionStart == '0') {
			//MOZILLA/NETSCAPE support
			startPos = this.selectionStart;
			endPos = this.selectionEnd;
			scrollTop = this.scrollTop;
			this.value = this.value.substring(0, startPos) + tagName + this.value.substring(endPos,this.value.length);
			this.focus();
			this.selectionStart = startPos + tagName.length;
			this.selectionEnd = startPos + tagName.length;
			this.scrollTop = scrollTop;
		}

完整的jQuery插件代码

(function($) {
$.fn.insertAtCaret = function (tagName) {
	return this.each(function(){
		if (document.selection) {
			//IE support
			this.focus();
			sel = document.selection.createRange();
			sel.text = tagName;
			this.focus();
		}else if (this.selectionStart || this.selectionStart == '0') {
			//MOZILLA/NETSCAPE support
			startPos = this.selectionStart;
			endPos = this.selectionEnd;
			scrollTop = this.scrollTop;
			this.value = this.value.substring(0, startPos) + tagName + this.value.substring(endPos,this.value.length);
			this.focus();
			this.selectionStart = startPos + tagName.length;
			this.selectionEnd = startPos + tagName.length;
			this.scrollTop = scrollTop;
		} else {
			this.value += tagName;
			this.focus();
		}
	});
};
})(jQuery);

用法:

$("#button").click(function(){$('#textarea').insertAtCaret(':)')});

另外一款jQuery插入插件,不同的是需要选中进行替换:

(function($){
$.fn.insertRoundCaret = function (tagName) {
	return this.each(function(){
		strStart = '['+tagName+']';
		strEnd = '[/'+tagName+']';
		if (document.selection) {
			//IE support
			stringBefore = this.value;
			this.focus();
			sel = document.selection.createRange();
			insertstring = sel.text;
			fullinsertstring = strStart + sel.text + strEnd;
			sel.text = fullinsertstring;
			document.selection.empty();
			this.focus();
			stringAfter = this.value;
			i = stringAfter.lastIndexOf(fullinsertstring);
			range = this.createTextRange();
			numlines = stringBefore.substring(0,i).split("\n").length;
			i = i+3-numlines+tagName.length;
			j = insertstring.length;
			range.move("character",i);
			range.moveEnd("character",j);
			range.select();
		}else if (this.selectionStart || this.selectionStart == '0') {
			//MOZILLA/NETSCAPE support
			startPos = this.selectionStart;
			endPos = this.selectionEnd;
			scrollTop = this.scrollTop;
			this.value = this.value.substring(0, startPos) + strStart + this.value.substring(startPos,endPos) + strEnd + this.value.substring(endPos,this.value.length);
			this.focus();
			this.selectionStart = startPos + strStart.length ;
			this.selectionEnd = endPos + strStart.length;
			this.scrollTop = scrollTop;
		} else {
			this.value += strStart + strEnd;
			this.focus();
		}
	});
};
})(jQuery)

用法:

$("#button").click(function(){$('#textarea').insertRoundCaret('b')});

发表评论

电子邮件地址不会被公开。 必填项已用*标注