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

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

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

运用到的依旧是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进行字符串截取处理

评论