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

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

在项目开发中经常遇到input等设置光标位置到最后的问题,IEFirefoxOpera等主流浏览器的获取光标位置(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 

感谢原文作者:三水清




 

 

posted @ 2013-05-17 22:44  kangxi  阅读(5286)  评论(0编辑  收藏  举报