javascript获取光标位置与在光标位置插入内容

javascript获取光标位置以及设置光标位置

在项目开发中经常遇到input等设置光标位置到最后的问题，在IE、Firefox、Opera等主流浏览器的获取光标位置（getCursortPosition）以及设置光标位置（setCursorPosition）的函数。

function getCursortPosition (ctrl) {//获取光标位置函数
	var CaretPos = 0;	// IE Support
	if (document.selection) {
	ctrl.focus ();
		var Sel = document.selection.createRange ();
		Sel.moveStart ('character', -ctrl.value.length);
		CaretPos = Sel.text.length;
	}
	// Firefox support
	else if (ctrl.selectionStart || ctrl.selectionStart == '0')
		CaretPos = ctrl.selectionStart;
	return (CaretPos);
}

PS：参数ctrl为input或者textarea对象

function setCaretPosition(ctrl, pos){//设置光标位置函数
	if(ctrl.setSelectionRange)
	{
		ctrl.focus();
		ctrl.setSelectionRange(pos,pos);
	}
	else if (ctrl.createTextRange) {
		var range = ctrl.createTextRange();
		range.collapse(true);
		range.moveEnd('character', pos);
		range.moveStart('character', pos);
		range.select();
	}
}

PS：参数ctrl为input或者textarea对象，pos为光标要移动到的位置。

javascript在光标位置插入内容

上一篇文章是通过javascript获取光标的位置——javascript获取光标位置以及设置光标位置。由于产品需要在留言板的光标处上插入表情，这样就用到了javascript在光标位置插入内容的功能了~其实原理很简单，IE下可以通过document.selection.createRange();来实现，而Firefox（火狐）浏览器则需要首先获取光标位置，然后对value进行字符串截取处理。

在光标位置插入内容插件代码  

(function($){
	$.fn.extend({
		insertAtCaret: function(myValue){
			var $t=$(this)[0];
			if (document.selection) {
				this.focus();
				sel = document.selection.createRange();
				sel.text = myValue;
				this.focus();
			}
			else 
				if ($t.selectionStart || $t.selectionStart == '0') {
					var startPos = $t.selectionStart;
					var endPos = $t.selectionEnd;
					var scrollTop = $t.scrollTop;
					$t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length);
					this.focus();
					$t.selectionStart = startPos + myValue.length;
					$t.selectionEnd = startPos + myValue.length;
					$t.scrollTop = scrollTop;
				}
				else {
					this.value += myValue;
					this.focus();
				}
		}
	})	
})(jQuery);

使用方法： 

$(selector).insertAtCaret("value");

另外，自己发现了一个小问题，对于点击表情事件来说，文本框肯定会失焦，这里绑定<a>标签时有效，而如果是绑定的是<span>时就会失效，就会出现原文评论出现的情况！

（

杨洋：我在ie8下面测了一下有问题，如果显示框失去了焦点，会自动将内容添加到最前面

）

 

 

原文地址：http://js8.in/538.html 

感谢原文作者：三水清