WEB前端：jQuery实现在指定输入框中的鼠标指针位置插入特定内容

近期在一个开发项目中遇到的这个问题，该问题以前做过，但是记录没有保存，因此在这里重新做一个记录。运用到的依旧是jQuery，当前环境为2.2.4，各位需要较真的小伙伴门自行测试其他版本不是很麻烦，直接上代码(function($){  $.fn.extend({  insertAtCaret: function(myValue){  var $t=$(this)[0];  if (document.s

近期在一个开发项目中遇到的这个问题，该问题以前做过，但是记录没有保存，因此在这里重新做一个记录。

运用到的依旧是jQuery，当前环境为2.2.4，各位需要较真的小伙伴门自行测试其他版本

不是很麻烦，直接上代码

(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");

注意一个问题，该方式为在指定输入框的鼠标指针所在地插入既定内容，内容中不需要添加原始内容，否则会造成内容重复

Tips：

IE下可以通过 document.selectIOn.createRange ();来实现，而Firefox（火狐）浏览器则 需要首先获取光标位置，然后对value进行字符串截取处理