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 

感謝原文作者：三水清