近期在一个开发项目中遇到的这个问题,该问题以前做过,但是记录没有保存,因此在这里重新做一个记录。运用...
近期在一个开发项目中遇到的这个问题,该问题以前做过,但是记录没有保存,因此在这里重新做一个记录。
运用到的依旧是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进行字符串截取处理